/** * AnnGhar Premium Cart — drawer stylesheet * Design language: Forest Green + Cream + Gold. Apple meets Zara meets Farmley. * All motion is GPU-accelerated (transform/opacity only) and respects * prefers-reduced-motion. */ :root { --annghar-pc-primary: #355e3b; --annghar-pc-secondary: #f8f5ed; --annghar-pc-accent: #c89b3c; --annghar-pc-font: inherit; --annghar-pc-radius: 16px; --annghar-pc-speed: 300ms; --annghar-pc-width: 420px; --annghar-pc-ease: cubic-bezier(0.16, 1, 0.3, 1); --annghar-pc-danger: #b3261e; --annghar-pc-ink: #1f2a20; --annghar-pc-ink-soft: #5c6b5e; --annghar-pc-border: rgba(53, 94, 59, 0.14); --annghar-pc-shadow: 0 24px 60px -12px rgba(31, 42, 32, 0.35); } /* ========================================================================== Reset scoped to plugin elements only — never leaks into the theme. Every selector below is prefixed with the `#annghar-pc-drawer` / `#annghar-pc-floating` IDs on purpose: an ID gives higher specificity than any class- or element-based rule a theme (Astra, etc.) ships for generic `button`/`svg` elements, so these resets always win the cascade regardless of stylesheet load order. This is what keeps the plugin's icons and icon-only buttons from being silently reskinned or hidden by theme-wide button/SVG normalisation rules. ========================================================================== */ #annghar-pc-drawer, #annghar-pc-drawer *, #annghar-pc-drawer *::before, #annghar-pc-drawer *::after, #annghar-pc-floating, #annghar-pc-floating * { box-sizing: border-box; font-family: var(--annghar-pc-font); } /* Icon-only controls must stay borderless regardless of any theme-wide * `button { border; border-radius; box-shadow; text-transform }` skin. * Deliberately does NOT touch `background`/`color` here — those are left * to each class's own rules (including :hover) further down this file, * which already win on specificity/cascade order against theme rules * now that this stylesheet is enqueued after the theme's (see * class-assets.php). Using !important only for properties this plugin * never legitimately varies keeps hover/focus states fully functional. */ #annghar-pc-drawer .annghar-pc-drawer__close, #annghar-pc-drawer .annghar-pc-item__remove, #annghar-pc-drawer .annghar-pc-qty__btn, #annghar-pc-drawer .annghar-pc-coupon-card__copy, #annghar-pc-drawer .annghar-pc-coupon-chip button { border: none !important; box-shadow: none !important; margin: 0 !important; text-transform: none !important; letter-spacing: normal !important; appearance: none !important; -webkit-appearance: none !important; } /* Guard against theme/accessibility-tool CSS that blanket-hides * `[aria-hidden="true"]` elements (a known anti-pattern some icon * resets use) and against global `svg { fill/stroke: ... }` resets * stripping our presentation attributes. Our icons are always decorative * (the interactive element carries its own aria-label), so forcing * visibility here never harms accessibility. */ #annghar-pc-drawer svg, #annghar-pc-floating svg { display: inline-block !important; visibility: visible !important; opacity: 1 !important; overflow: visible; flex-shrink: 0; } #annghar-pc-drawer svg [stroke], #annghar-pc-floating svg [stroke] { stroke: currentColor !important; } #annghar-pc-drawer svg [fill]:not([fill="none"]), #annghar-pc-floating svg [fill]:not([fill="none"]) { fill: currentColor !important; } /* ========================================================================== Scroll lock (applied to while the drawer is open) ========================================================================== */ html.annghar-pc-lock-scroll { overflow: hidden; } /* ========================================================================== Floating action button ========================================================================== */ .annghar-pc-floating { position: fixed; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 100000; width: 60px; height: 60px; border-radius: 50%; border: none; background: var(--annghar-pc-primary); color: var(--annghar-pc-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 12px 28px -6px rgba(53, 94, 59, 0.55); transition: transform var(--annghar-pc-speed) var(--annghar-pc-ease), box-shadow var(--annghar-pc-speed) var(--annghar-pc-ease); will-change: transform; } .annghar-pc-floating:hover { background: var(--annghar-pc-primary); color: var(--annghar-pc-secondary); transform: translateY(-2px) scale(1.05); box-shadow: 0 16px 34px -6px rgba(53, 94, 59, 0.6); } .annghar-pc-floating:focus-visible { outline: 3px solid var(--annghar-pc-accent); outline-offset: 3px; } .annghar-pc-floating--bottom-right { right: max(24px, env(safe-area-inset-right)); } .annghar-pc-floating--bottom-left { left: max(24px, env(safe-area-inset-left)); } .annghar-pc-floating__icon { width: 26px; height: 26px; } .annghar-pc-floating.annghar-pc-shake { animation: annghar-pc-shake var(--annghar-pc-speed) var(--annghar-pc-ease); } @keyframes annghar-pc-shake { 0%, 100% { transform: translateX(0) rotate(0); } 20% { transform: translateX(-4px) rotate(-6deg); } 40% { transform: translateX(4px) rotate(6deg); } 60% { transform: translateX(-3px) rotate(-4deg); } 80% { transform: translateX(3px) rotate(4deg); } } /* ========================================================================== Badge ========================================================================== */ .annghar-pc-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--annghar-pc-accent); color: #2a2110; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; transform: scale(0); transition: transform 220ms var(--annghar-pc-ease); } .annghar-pc-drawer__title .annghar-pc-badge { position: static; display: inline-flex; align-items: center; justify-content: center; transform: none; margin-inline-start: 6px; vertical-align: middle; } .annghar-pc-badge.is-visible { transform: scale(1); } /* ========================================================================== Overlay ========================================================================== */ .annghar-pc-overlay { position: fixed; inset: 0; background: rgba(20, 26, 20, 0.5); backdrop-filter: blur(2px); z-index: 100001; opacity: 0; transition: opacity var(--annghar-pc-speed) var(--annghar-pc-ease); } .annghar-pc-overlay[hidden] { display: none; } .annghar-pc-overlay.is-visible { opacity: 1; } /* ========================================================================== Drawer panel ========================================================================== */ .annghar-pc-drawer { position: fixed; top: 0; right: 0; height: 100%; height: 100dvh; width: min(var(--annghar-pc-width), 100vw); background: var(--annghar-pc-secondary); color: var(--annghar-pc-ink); z-index: 100002; display: flex; flex-direction: column; transform: translateX(105%); transition: transform var(--annghar-pc-speed) var(--annghar-pc-ease); box-shadow: var(--annghar-pc-shadow); will-change: transform; padding-bottom: env(safe-area-inset-bottom); } .annghar-pc-drawer[hidden] { display: flex; visibility: hidden; } .annghar-pc-drawer.is-open { transform: translateX(0); visibility: visible; } .annghar-pc-drawer--bottom-left { right: auto; left: 0; transform: translateX(-105%); } .annghar-pc-drawer--bottom-left.is-open { transform: translateX(0); } @media (max-width: 640px) { .annghar-pc-drawer { top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: min(92dvh, 860px); border-top-left-radius: var(--annghar-pc-radius); border-top-right-radius: var(--annghar-pc-radius); transform: translateY(100%); } .annghar-pc-drawer.is-open { transform: translateY(0); } } /* ========================================================================== Header ========================================================================== */ .annghar-pc-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--annghar-pc-border); flex-shrink: 0; } .annghar-pc-drawer__title { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: 0.01em; color: var(--annghar-pc-primary); display: flex; align-items: center; } .annghar-pc-drawer__close { width: 36px; height: 36px; border-radius: 50%; border: none; background: transparent; color: var(--annghar-pc-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--annghar-pc-speed) ease; } .annghar-pc-drawer__close:hover { background: rgba(53, 94, 59, 0.08); color: var(--annghar-pc-ink); } .annghar-pc-drawer__close:focus-visible, .annghar-pc-drawer *:focus-visible { outline: 3px solid var(--annghar-pc-accent); outline-offset: 2px; } /* ========================================================================== Scroll body ========================================================================== */ .annghar-pc-drawer__scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 20px 24px 8px; } .annghar-pc-drawer__body { min-height: 40px; } .annghar-pc-drawer__body.is-loading { opacity: 0.5; pointer-events: none; transition: opacity 150ms ease; } /* ========================================================================== Items ========================================================================== */ .annghar-pc-items { display: flex; flex-direction: column; gap: 18px; } .annghar-pc-item { position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--annghar-pc-border); animation: annghar-pc-fade-in 260ms var(--annghar-pc-ease); } .annghar-pc-item.is-removing { animation: annghar-pc-fade-out 200ms var(--annghar-pc-ease) forwards; } @keyframes annghar-pc-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes annghar-pc-fade-out { to { opacity: 0; transform: scale(0.96); max-height: 0; margin: 0; padding: 0; } } .annghar-pc-item__image img { width: 76px; height: 76px; object-fit: cover; border-radius: calc(var(--annghar-pc-radius) * 0.6); display: block; background: #fff; border: 1px solid var(--annghar-pc-border); } .annghar-pc-item__details { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .annghar-pc-item__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .annghar-pc-item__title-group { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; } .annghar-pc-item__name { font-weight: 600; font-size: 14.5px; color: var(--annghar-pc-ink); text-decoration: none; line-height: 1.35; } .annghar-pc-item__name:hover { color: var(--annghar-pc-primary); } /* SAVE badge — small rounded pill, light green background, dark green text. Only ever rendered by cart-item.php when Regular Price > Sale Price, so its mere presence in the DOM already means "on sale". */ .annghar-pc-save-badge { display: inline-flex; align-items: center; flex-shrink: 0; padding: 2px 9px; border-radius: 999px; background: rgba(53, 94, 59, 0.12); color: var(--annghar-pc-primary); font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; } .annghar-pc-item__remove { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: none; background: transparent; color: var(--annghar-pc-ink-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 150ms ease, color 150ms ease; } .annghar-pc-item__remove:hover { background: rgba(179, 38, 30, 0.08); color: var(--annghar-pc-danger); } .annghar-pc-item__meta { font-size: 12.5px; color: var(--annghar-pc-ink-soft); } .annghar-pc-item__meta p { margin: 0; } .annghar-pc-item__weight { margin: 0; font-size: 12px; color: var(--annghar-pc-ink-soft); } .annghar-pc-item__row--footer { align-items: center; margin-top: 4px; } .annghar-pc-item__subtotal { font-weight: 700; font-size: 14px; color: var(--annghar-pc-primary); white-space: nowrap; } /* Stacked sale/regular price — only rendered in place of `.annghar-pc-item__subtotal` when the line is genuinely on sale (see cart-item.php), so the plain, unchanged subtotal display for every non-sale product is completely untouched. */ .annghar-pc-item__price-stack { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; line-height: 1.3; } .annghar-pc-item__price-sale { font-weight: 800; font-size: 15px; color: var(--annghar-pc-primary); white-space: nowrap; } .annghar-pc-item__price-regular { font-size: 12px; font-weight: 500; color: var(--annghar-pc-ink-soft); text-decoration: line-through; white-space: nowrap; } .annghar-pc-item__loading { position: absolute; inset: 0; background: rgba(248, 245, 237, 0.6); display: none; align-items: center; justify-content: center; border-radius: calc(var(--annghar-pc-radius) * 0.4); } .annghar-pc-item.is-updating .annghar-pc-item__loading { display: flex; } /* ========================================================================== Quantity stepper ========================================================================== */ .annghar-pc-qty { display: inline-flex; align-items: center; border: 1px solid var(--annghar-pc-border); border-radius: 999px; overflow: hidden; } .annghar-pc-qty__btn { width: 28px; height: 28px; border: none; background: transparent; color: var(--annghar-pc-primary); font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 150ms ease; } .annghar-pc-qty__btn:hover { background: rgba(53, 94, 59, 0.08); color: var(--annghar-pc-primary); } .annghar-pc-qty__input { width: 32px; border: none; background: transparent; text-align: center; font-size: 13px; font-weight: 600; color: var(--annghar-pc-ink); -moz-appearance: textfield; } .annghar-pc-qty__input::-webkit-outer-spin-button, .annghar-pc-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .annghar-pc-qty--fixed { font-size: 13px; font-weight: 600; color: var(--annghar-pc-ink-soft); } /* ========================================================================== Free shipping progress ========================================================================== */ .annghar-pc-shipping { margin: 20px 0; padding: 16px; border-radius: var(--annghar-pc-radius); background: #fff; border: 1px solid var(--annghar-pc-border); box-shadow: 0 8px 20px -14px rgba(31, 42, 32, 0.5); } .annghar-pc-shipping__message { margin: 0 0 10px; font-size: 13.5px; font-weight: 600; color: var(--annghar-pc-primary); display: flex; align-items: center; gap: 6px; } .annghar-pc-shipping__bar { position: relative; height: 8px; border-radius: 999px; background: rgba(53, 94, 59, 0.12); overflow: hidden; } .annghar-pc-shipping__fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--annghar-pc-primary), var(--annghar-pc-accent)); transition: width 500ms var(--annghar-pc-ease); } .annghar-pc-shipping[data-unlocked="1"] .annghar-pc-shipping__fill { background: var(--annghar-pc-accent); } .annghar-pc-shipping__scale { display: flex; justify-content: space-between; margin: 8px 0 0; font-size: 11.5px; color: var(--annghar-pc-ink-soft); } /* ========================================================================== Coupons ========================================================================== */ .annghar-pc-coupons { margin: 20px 0; display: flex; flex-direction: column; gap: 12px; } .annghar-pc-coupons__applied { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .annghar-pc-coupon-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: rgba(53, 94, 59, 0.1); color: var(--annghar-pc-primary); border-radius: 999px; font-size: 12px; font-weight: 700; } .annghar-pc-coupon-chip button { border: none; background: transparent; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0; } .annghar-pc-coupon-chip button:hover { background: transparent; color: var(--annghar-pc-primary); } /* Large Farmley-style "Save ₹X using CODE" hero card for the qualified best coupon (see class-coupons.php get_recommendation()). */ .annghar-pc-coupon-hero { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; border-radius: var(--annghar-pc-radius); padding: 14px 16px; background: linear-gradient(0deg, rgba(200, 155, 60, 0.1), rgba(200, 155, 60, 0.1)), #fff; border: 1px solid var(--annghar-pc-accent); box-shadow: 0 8px 20px -14px rgba(31, 42, 32, 0.5); } .annghar-pc-coupon-hero__pill { width: 52px; height: 52px; border-radius: 50%; background: var(--annghar-pc-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; text-align: center; line-height: 1.1; flex-shrink: 0; } .annghar-pc-coupon-hero__body { min-width: 0; } .annghar-pc-coupon-hero__save { margin: 0; font-size: 14px; font-weight: 700; color: var(--annghar-pc-ink); } .annghar-pc-coupon-hero__save code { background: none; color: var(--annghar-pc-primary); font-weight: 800; letter-spacing: 0.04em; } .annghar-pc-coupon-hero__desc { margin: 2px 0 0; font-size: 12px; color: var(--annghar-pc-ink-soft); } .annghar-pc-more-offers { display: block; width: 100%; text-align: center; background: none; border: none; padding: 10px 0 0; font-size: 12.5px; font-weight: 700; color: var(--annghar-pc-primary); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .annghar-pc-more-offers:hover { color: var(--annghar-pc-accent); } /* "You're only ₹X away" nudge for a not-yet-qualified coupon. */ .annghar-pc-nudge { border-radius: var(--annghar-pc-radius); padding: 14px 16px; background: #fff; border: 1px solid var(--annghar-pc-border); box-shadow: 0 8px 20px -14px rgba(31, 42, 32, 0.5); } .annghar-pc-nudge--almost { border-style: dashed; background: linear-gradient(0deg, rgba(53, 94, 59, 0.05), rgba(53, 94, 59, 0.05)), #fff; } .annghar-pc-nudge__code { font-size: 15px; font-weight: 800; letter-spacing: 0.05em; color: var(--annghar-pc-primary); background: none; display: block; } .annghar-pc-nudge__message { margin: 0 0 8px; font-size: 13.5px; font-weight: 600; color: var(--annghar-pc-ink); display: flex; align-items: center; gap: 6px; } .annghar-pc-nudge__code-row { margin: 0; font-size: 12.5px; color: var(--annghar-pc-ink-soft); display: flex; align-items: center; gap: 8px; } /* "Available Offers" trigger button (opens the offers popup) */ .annghar-pc-offers-trigger { display: flex; align-items: center; gap: 10px; width: 100%; border: 1px dashed var(--annghar-pc-border); border-radius: var(--annghar-pc-radius); background: #fff; color: var(--annghar-pc-primary); padding: 12px 14px; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 150ms ease, border-color 150ms ease; } .annghar-pc-offers-trigger:hover { background: rgba(53, 94, 59, 0.05); border-color: var(--annghar-pc-primary); color: var(--annghar-pc-primary); } .annghar-pc-offers-trigger span:first-of-type { flex: 1; text-align: left; } .annghar-pc-offers-trigger__chevron { color: var(--annghar-pc-ink-soft); } /* ========================================================================== Available Offers popup — nested inside `#annghar-pc-drawer` (which is `position: fixed`), so this popup's own absolute-positioned scrim/sheet are automatically contained to the drawer's box. Opening/closing it never touches the main drawer's own open state. ========================================================================== */ .annghar-pc-offers { position: absolute; inset: 0; z-index: 20; pointer-events: none; } .annghar-pc-offers[hidden] { display: block; visibility: hidden; } .annghar-pc-offers__scrim { position: absolute; inset: 0; background: rgba(20, 26, 20, 0.45); opacity: 0; transition: opacity var(--annghar-pc-speed) var(--annghar-pc-ease); } .annghar-pc-offers__sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82%; display: flex; flex-direction: column; background: var(--annghar-pc-secondary); border-top-left-radius: calc(var(--annghar-pc-radius) * 1.3); border-top-right-radius: calc(var(--annghar-pc-radius) * 1.3); box-shadow: 0 -20px 50px -10px rgba(31, 42, 32, 0.4); transform: translateY(100%); transition: transform var(--annghar-pc-speed) var(--annghar-pc-ease); } .annghar-pc-offers.is-open { pointer-events: auto; } .annghar-pc-offers.is-open .annghar-pc-offers__scrim { opacity: 1; } .annghar-pc-offers.is-open .annghar-pc-offers__sheet { transform: translateY(0); } .annghar-pc-offers__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 24px 12px; flex-shrink: 0; } .annghar-pc-offers__title { margin: 0 0 2px; font-size: 17px; font-weight: 800; color: var(--annghar-pc-primary); } .annghar-pc-offers__subtitle { margin: 0; font-size: 12.5px; color: var(--annghar-pc-ink-soft); } .annghar-pc-offers__close { width: 32px; height: 32px; border-radius: 50%; background: rgba(53, 94, 59, 0.08); color: var(--annghar-pc-ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .annghar-pc-offers__content { overflow-y: auto; overscroll-behavior: contain; padding: 4px 24px 24px; } .annghar-pc-offers-grid { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; } .annghar-pc-offers-empty { font-size: 13px; color: var(--annghar-pc-ink-soft); text-align: center; padding: 24px 0; } .annghar-pc-offer-card { position: relative; display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 14px; border: 1px dashed var(--annghar-pc-border); border-radius: var(--annghar-pc-radius); padding: 14px; background: #fff; box-shadow: 0 8px 20px -16px rgba(31, 42, 32, 0.5); } .annghar-pc-offer-card--best { border-color: var(--annghar-pc-accent); background: linear-gradient(0deg, rgba(200, 155, 60, 0.06), rgba(200, 155, 60, 0.06)), #fff; } .annghar-pc-offer-card--active { border-color: var(--annghar-pc-primary); border-style: solid; background: linear-gradient(0deg, rgba(53, 94, 59, 0.06), rgba(53, 94, 59, 0.06)), #fff; } .annghar-pc-offer-card__badge { position: absolute; top: -10px; left: 14px; display: inline-flex; align-items: center; gap: 4px; background: var(--annghar-pc-accent); color: #2a2110; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; } .annghar-pc-offer-card__badge--active { background: var(--annghar-pc-primary); color: #fff; } .annghar-pc-offer-card__pill { width: 56px; height: 56px; border-radius: 50%; background: var(--annghar-pc-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; text-align: center; line-height: 1.1; flex-shrink: 0; } .annghar-pc-offer-card__body { min-width: 0; } .annghar-pc-offer-card__code { font-size: 14px; font-weight: 800; letter-spacing: 0.05em; color: var(--annghar-pc-primary); background: none; display: block; } .annghar-pc-offer-card__desc { margin: 2px 0 4px; font-size: 12.5px; font-weight: 600; color: var(--annghar-pc-ink); } .annghar-pc-offer-card__meta { margin: 0; font-size: 11.5px; color: var(--annghar-pc-ink-soft); } .annghar-pc-offer-card__hint { margin: 4px 0 0; font-size: 11px; color: var(--annghar-pc-ink-soft); } .annghar-pc-offer-card__savings { margin: 4px 0 0; font-size: 11.5px; font-weight: 700; color: var(--annghar-pc-primary); } .annghar-pc-offer-card__actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; } .annghar-pc-coupon-form { display: flex; gap: 8px; } .annghar-pc-coupon-form input { flex: 1; padding: 10px 12px; border: 1px solid var(--annghar-pc-border); border-radius: 999px; font-size: 13px; background: #fff; color: var(--annghar-pc-ink); } .annghar-pc-coupon-form input:focus-visible { outline: 2px solid var(--annghar-pc-accent); outline-offset: 1px; } /* ========================================================================== Recommendations ========================================================================== */ .annghar-pc-recommendations { margin: 24px 0 8px; } .annghar-pc-recommendations__title { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--annghar-pc-primary); } .annghar-pc-recommendations__viewport { position: relative; } .annghar-pc-recommendations__track { display: flex; align-items: stretch; gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .annghar-pc-recommendations__track::-webkit-scrollbar { display: none; } /* Desktop-only prev/next arrows; touch devices rely on native swipe. */ .annghar-pc-recommendations__arrow { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--annghar-pc-primary); border: 1px solid var(--annghar-pc-border); box-shadow: 0 6px 16px -6px rgba(31, 42, 32, 0.4); z-index: 2; align-items: center; justify-content: center; } .annghar-pc-recommendations__arrow--prev { left: -6px; } .annghar-pc-recommendations__arrow--next { right: -6px; } @media (hover: hover) and (pointer: fine) { .annghar-pc-recommendations__arrow { display: flex; } } .annghar-pc-reco-card { scroll-snap-align: start; flex: 0 0 136px; display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 10px; border: 1px solid var(--annghar-pc-border); border-radius: var(--annghar-pc-radius); background: #fff; box-shadow: 0 8px 18px -14px rgba(31, 42, 32, 0.45); transition: transform 160ms var(--annghar-pc-ease), box-shadow 160ms var(--annghar-pc-ease); } .annghar-pc-reco-card:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -12px rgba(31, 42, 32, 0.5); } .annghar-pc-reco-card.is-added { animation: annghar-pc-reco-added 480ms var(--annghar-pc-ease); } @keyframes annghar-pc-reco-added { 0% { box-shadow: 0 0 0 0 rgba(53, 94, 59, 0.5); } 60% { box-shadow: 0 0 0 8px rgba(53, 94, 59, 0); } 100% { box-shadow: 0 8px 18px -14px rgba(31, 42, 32, 0.45); } } .annghar-pc-reco-card__image { position: relative; display: flex; align-items: center; justify-content: center; border-radius: calc(var(--annghar-pc-radius) * 0.6); overflow: hidden; background: var(--annghar-pc-secondary); } .annghar-pc-reco-card__image img { width: 100%; height: 116px; object-fit: cover; display: block; } .annghar-pc-reco-card__discount { position: absolute; top: 6px; left: 6px; background: var(--annghar-pc-primary); color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: 0.02em; padding: 2px 6px; border-radius: 999px; } .annghar-pc-reco-card__name { flex: 1 0 auto; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--annghar-pc-ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .annghar-pc-reco-card__weight { margin: 0; font-size: 10.5px; color: var(--annghar-pc-ink-soft); } .annghar-pc-reco-card__price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .annghar-pc-reco-card__current { font-size: 13px; font-weight: 800; color: var(--annghar-pc-primary); } .annghar-pc-reco-card__mrp { font-size: 11px; color: var(--annghar-pc-ink-soft); } .annghar-pc-reco-card__action { margin-top: 2px; } .annghar-pc-reco-add, .annghar-pc-reco-card__action .annghar-pc-btn { width: 100%; } /* ========================================================================== Empty state ========================================================================== */ .annghar-pc-empty { text-align: center; padding: 24px 8px 8px; } .annghar-pc-empty__illustration { margin: 0 auto 8px; } .annghar-pc-empty__title { margin: 8px 0 4px; font-size: 18px; font-weight: 800; color: var(--annghar-pc-primary); } .annghar-pc-empty__subtitle { margin: 0 0 20px; font-size: 13.5px; color: var(--annghar-pc-ink-soft); } .annghar-pc-empty__cta { display: inline-flex; } .annghar-pc-empty__trending { margin-top: 32px; text-align: left; } .annghar-pc-empty__trending h4 { font-size: 14px; font-weight: 700; color: var(--annghar-pc-primary); margin: 0 0 12px; } /* ========================================================================== Buttons ========================================================================== */ .annghar-pc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 999px; padding: 13px 22px; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; cursor: pointer; text-decoration: none; transition: transform 160ms var(--annghar-pc-ease), box-shadow 160ms var(--annghar-pc-ease), background 160ms ease; } .annghar-pc-btn:active { transform: scale(0.97); } .annghar-pc-btn--primary { background: var(--annghar-pc-primary); color: #fff; box-shadow: 0 10px 24px -8px rgba(53, 94, 59, 0.6); } /* Every `.annghar-pc-btn--*:hover` rule below re-asserts its own * `background`/`color` explicitly — not just the property that visually * changes on hover (shadow, border) — because a theme's own * `button:hover { color: #fff }`-style rule (common, and one pseudo-class * heavier than our unqualified rest-state selector) can otherwise win on * specificity and leave white text on a now-unstyled background. A * same-specificity `:hover` rule on our own class always wins instead. */ .annghar-pc-btn--primary:hover { background: var(--annghar-pc-primary); color: #fff; box-shadow: 0 14px 28px -8px rgba(53, 94, 59, 0.7); } .annghar-pc-btn--secondary { background: var(--annghar-pc-accent); color: #2a2110; } .annghar-pc-btn--secondary:hover { background: var(--annghar-pc-accent); color: #2a2110; filter: brightness(1.05); } .annghar-pc-btn--ghost { background: transparent; color: var(--annghar-pc-primary); border: 1.5px solid var(--annghar-pc-primary); } .annghar-pc-btn--ghost:hover { background: rgba(53, 94, 59, 0.08); color: var(--annghar-pc-primary); border-color: var(--annghar-pc-primary); } .annghar-pc-btn--ghost:disabled:hover { background: transparent; } .annghar-pc-btn--small { padding: 8px 16px; font-size: 12.5px; } .annghar-pc-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .annghar-pc-btn.is-loading .annghar-pc-checkout__label, .annghar-pc-btn.is-loading .annghar-pc-checkout__sep, .annghar-pc-btn.is-loading .annghar-pc-checkout__total { opacity: 0; } .annghar-pc-btn .annghar-pc-spinner { display: none; } .annghar-pc-btn.is-loading .annghar-pc-spinner { display: block; position: absolute; } /* The Checkout button's label/separator/total/spinner must never be able * to become `event.target` on click — Razorpay Magic Checkout's own * script matches strictly on `event.target.id === 'btn-1cc'` with no * `.closest()` fallback, so a click landing on a child span would be * invisible to it. Forcing all descendants to ignore pointer events makes * the button itself the target no matter where inside it is clicked. */ .annghar-pc-checkout > * { pointer-events: none; } .annghar-pc-checkout__sep { opacity: 0.7; } .annghar-pc-checkout__total { font-variant-numeric: tabular-nums; } /* ========================================================================== Sticky footer: live subtotal/discount/shipping summary, a divider, then the action buttons (Continue Shopping + Checkout with live total). `flex-shrink: 0` on a flex-column ancestor (`.annghar-pc-drawer`) is what pins this to the bottom while `.annghar-pc-drawer__scroll` (the only `flex: 1 1 auto` sibling) absorbs all scrolling — the footer never moves, exactly like Farmley/Blinkit/Zepto/Apple Store cart drawers. ========================================================================== */ .annghar-pc-drawer__footer { flex-shrink: 0; padding: 16px 24px 20px; border-top: 1px solid var(--annghar-pc-border); background: var(--annghar-pc-secondary); box-shadow: 0 -12px 24px -18px rgba(31, 42, 32, 0.45); } /* Estimated Total — collapsible Farmley-style summary living at the top of the sticky footer. Collapsed shows only the headline (original price struck through, current total, savings); expanding reveals the full Subtotal/Shipping/Coupon Discount/Tax/Grand Total breakdown. */ .annghar-pc-estimated-total { margin-bottom: 12px; } .annghar-pc-estimated-total[hidden] { display: none; } .annghar-pc-estimated-total__toggle { display: flex; align-items: center; flex-wrap: wrap; width: 100%; gap: 4px 10px; background: none; border: none; padding: 0; cursor: pointer; text-align: left; } .annghar-pc-estimated-total__main { display: flex; align-items: baseline; gap: 8px; flex: 1 1 auto; } .annghar-pc-estimated-total__label { font-size: 12.5px; font-weight: 700; color: var(--annghar-pc-ink-soft); } .annghar-pc-estimated-total__value { display: flex; align-items: baseline; gap: 6px; } .annghar-pc-estimated-total__value strong { font-size: 19px; font-weight: 800; color: var(--annghar-pc-primary); } .annghar-pc-estimated-total__original { font-size: 12.5px; color: var(--annghar-pc-ink-soft); opacity: 0.8; } /* "🎉 You Saved ₹X on this order" — the drawer's one and only savings banner: product Regular-vs-Sale-price savings plus every applied coupon's discount, combined into a single figure (see Annghar_PC_Pricing::get_cart_pricing()'s `total_savings`) so a customer is never shown two different "you saved" rows for what is, from their point of view, one combined saving. */ .annghar-pc-estimated-total__total-savings { flex-basis: 100%; font-size: 11.5px; font-weight: 700; color: var(--annghar-pc-accent); } .annghar-pc-estimated-total__chevron { margin-left: auto; color: var(--annghar-pc-ink-soft); transition: transform var(--annghar-pc-speed) var(--annghar-pc-ease); flex-shrink: 0; } .annghar-pc-estimated-total__toggle[aria-expanded="true"] .annghar-pc-estimated-total__chevron { transform: rotate(180deg); } .annghar-pc-estimated-total__details { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--annghar-pc-speed) var(--annghar-pc-ease), opacity var(--annghar-pc-speed) ease, margin-top var(--annghar-pc-speed) ease; } .annghar-pc-estimated-total__details-inner { overflow: hidden; min-height: 0; } .annghar-pc-estimated-total__toggle[aria-expanded="true"] + .annghar-pc-estimated-total__details { grid-template-rows: 1fr; opacity: 1; margin-top: 10px; } .annghar-pc-estimated-total__row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--annghar-pc-ink-soft); padding: 4px 0; } .annghar-pc-estimated-total__row--discount span:last-child { color: var(--annghar-pc-primary); font-weight: 600; } .annghar-pc-estimated-total__row--total { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--annghar-pc-border); font-size: 14px; font-weight: 800; color: var(--annghar-pc-primary); } /* Earn Cashback — collapsible rewards preview, same collapse mechanics as .annghar-pc-estimated-total (grid-template-rows 0fr -> 1fr) so both blocks feel like one family in the sticky footer. */ .annghar-pc-rewards { margin-bottom: 12px; } .annghar-pc-rewards[hidden] { display: none; } .annghar-pc-rewards__toggle { display: flex; align-items: center; width: 100%; gap: 10px; background: none; border: none; padding: 0; cursor: pointer; text-align: left; } .annghar-pc-rewards__icon { font-size: 18px; line-height: 1; flex-shrink: 0; } .annghar-pc-rewards__main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; } .annghar-pc-rewards__label { font-size: 12.5px; font-weight: 700; color: var(--annghar-pc-ink-soft); } .annghar-pc-rewards__headline { font-size: 13px; color: var(--annghar-pc-primary); } .annghar-pc-rewards__headline strong { font-weight: 800; } .annghar-pc-rewards__chevron { margin-left: auto; color: var(--annghar-pc-ink-soft); transition: transform var(--annghar-pc-speed) var(--annghar-pc-ease); flex-shrink: 0; } .annghar-pc-rewards__toggle[aria-expanded="true"] .annghar-pc-rewards__chevron { transform: rotate(180deg); } .annghar-pc-rewards__details { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--annghar-pc-speed) var(--annghar-pc-ease), opacity var(--annghar-pc-speed) ease, margin-top var(--annghar-pc-speed) ease; } .annghar-pc-rewards__details-inner { overflow: hidden; min-height: 0; } .annghar-pc-rewards__toggle[aria-expanded="true"] + .annghar-pc-rewards__details { grid-template-rows: 1fr; opacity: 1; margin-top: 10px; } /* Admin-configurable "Cashback Description" (see class-settings.php / class-admin.php) — plain prose plus the small set of tags it's sanitised to allow (,
, ,