/* Hobby Horse Academy: the cart (page + drawer), Shopify-style in the app's look. */
.ct { --ct-card: #121214; --ct-raise: #1c1c1e; --ct-ease: cubic-bezier(0.23, 1, 0.32, 1); --ct-green: #5fd29b; color: var(--hha-ink); }
.ct.is-busy .ct-line-price, .ct.is-busy .ct-sum { opacity: 0.55; transition: opacity 200ms ease; }
.ct-grid { display: grid; gap: 20px; }
@media (min-width: 900px) { [data-hha-cart="page"] .ct-grid { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } [data-hha-cart="page"] .ct-side { position: sticky; top: 24px; } }
.ct-main, .ct-side { display: grid; gap: 16px; min-width: 0; }

/* free shipping progress */
.ct-ship { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: center; padding: 14px 16px 18px; border-radius: 18px; background: var(--ct-card); font-size: 14.5px; line-height: 1.35; overflow: hidden; }
.ct-ship svg { width: 22px; height: 22px; color: #ff3d9a; }
.ct-ship i { position: absolute; left: 16px; right: 16px; bottom: 9px; height: 4px; border-radius: 4px; background: #2c2c30; }
.ct-ship i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: #ff3d9a; transition: width 500ms var(--ct-ease); }
.ct-ship.is-done svg { color: var(--ct-green); }
.ct-ship.is-done i::after { background: var(--ct-green); }
.ct-ship.is-done:not(:has(i)) { padding-bottom: 14px; }

/* lines */
.ct-lines { display: grid; }
.ct-line { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid #222225; transition: opacity 240ms ease, transform 240ms var(--ct-ease); }
.ct-line:first-child { padding-top: 0; }
.ct-line.is-leaving { opacity: 0; transform: translateX(12px); }
.ct-img { display: block; width: 84px; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #161618; }
.ct-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-info { display: grid; gap: 4px; min-width: 0; }
.ct-name { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--hha-ink) !important; text-decoration: none !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ct-meta { font-size: 13px; color: var(--hha-muted); }
.ct-row { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.ct-qty { display: inline-flex; align-items: center; border-radius: 999px; background: var(--ct-raise); }
.ct-qty button { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--hha-ink); cursor: pointer; transition: transform 140ms var(--ct-ease); }
.ct-qty button:active { transform: scale(0.88); }
.ct-qty svg { width: 16px; height: 16px; }
.ct-qty-n { min-width: 22px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.ct-remove { min-height: 38px; padding: 0; border: 0; background: none; color: var(--hha-muted); font: 500 13.5px / 1 var(--hha-font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ct-line-price { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* suggestions */
p.ct-h { margin: 6px 0 10px; font: 700 17px / 1.2 var(--hha-font-display); color: var(--hha-ink) !important; }
.ct-xs-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ct-xs-rail::-webkit-scrollbar { display: none; }
.ct-xs-card { display: grid; gap: 6px; min-width: 0; }
.ct-xs-card img { width: 132px; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: #161618; display: block; }
.ct-xs-name { font-size: 13px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ct-xs-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 13.5px; }
.ct-xs-foot button, .ct-xs-go { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #fff; color: #000 !important; cursor: pointer; }
.ct-xs-foot svg { width: 16px; height: 16px; }

/* code, totals, checkout */
.ct-codeopen { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0; border: 0; background: none; color: var(--hha-ink); font: 600 14.5px / 1 var(--hha-font-body); cursor: pointer; }
.ct-codeopen svg, .ct-coupon svg { width: 18px; height: 18px; color: #ff3d9a; }
.ct-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.ct-code input { min-height: 46px; padding: 0 14px; border: 1.5px solid #2c2c30 !important; border-radius: 14px !important; background: #0d0d0f !important; color: var(--hha-ink) !important; font: 16px / 1 var(--hha-font-body) !important; text-transform: uppercase; box-shadow: none !important; }
.ct-code input:focus { outline: none; border-color: #ff3d9a !important; }
.ct-code button { min-height: 46px; padding: 0 18px; border: 0; border-radius: 14px; background: #fff; color: #000; font: 700 14.5px / 1 var(--hha-font-body); cursor: pointer; }
.ct-coupon { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: rgba(95, 210, 155, 0.12); color: var(--ct-green); font-weight: 700; font-size: 14px; }
.ct-coupon span { flex: 1; }
.ct-coupon button { border: 0; background: none; color: var(--hha-muted); text-decoration: underline; cursor: pointer; font-size: 13px; }
p.ct-msg { margin: 0; font-size: 14px; color: #ff8a8a !important; }
p.ct-msg:empty { display: none; }
.ct-sum { display: grid; gap: 8px; padding: 16px; border-radius: 18px; background: var(--ct-card); }
.ct-sum-row { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; color: #c7c7cc; font-variant-numeric: tabular-nums; }
.ct-sum-row.is-disc { color: var(--ct-green); }
.ct-sum-row.is-total { margin-top: 6px; padding-top: 12px; border-top: 1px solid #2c2c30; color: var(--hha-ink); font-size: 18px; font-weight: 800; }
.ct-checkout { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 22px; border-radius: 999px; background: #d4148a; color: #fff !important; font: 700 17px / 1 var(--hha-font-body); text-decoration: none !important; transition: transform 160ms var(--ct-ease); }
.ct-checkout:active { transform: scale(0.98); }
.ct-checkout svg { width: 18px; height: 18px; }
.ct-checkout b { margin-left: auto; font-variant-numeric: tabular-nums; }
.ct-checkout span + b { padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, 0.35); }
p.ct-trust { margin: -6px 0 0; text-align: center; font-size: 12.5px; color: var(--hha-muted) !important; }
.ct-sticky { display: none; }
@media (max-width: 899px) {
  [data-hha-cart="page"] .ct-sticky { display: block; position: fixed; z-index: 9989; left: 12px; right: 12px; bottom: calc(var(--hs-tabs, 58px) + 16px + env(safe-area-inset-bottom, 0px)); }
  [data-hha-cart="page"] .ct-sticky .ct-checkout { box-shadow: 0 14px 34px -12px rgba(212, 20, 138, 0.7); }
  .hs-cartpage { padding-bottom: 100px; }
}

/* empty */
.ct-empty { display: grid; justify-items: center; gap: 10px; padding: 36px 20px; border-radius: 22px; background: var(--ct-card); text-align: center; }
.ct-empty-ico { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 20px; background: var(--ct-raise); color: #ff3d9a; }
.ct-empty-ico svg { width: 32px; height: 32px; }
p.ct-empty-title { margin: 4px 0 0; font: 700 20px / 1.2 var(--hha-font-display); color: var(--hha-ink) !important; }
p.ct-empty-sub { margin: 0 0 8px; font-size: 15px; color: var(--hha-muted) !important; }
.ct-empty .ct-checkout { min-width: 220px; }

/* drawer */
.ct-drawer { position: fixed; inset: 0; z-index: 10010; }
.ct-drawer-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); opacity: 0; transition: opacity 260ms ease; }
.ct-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); display: flex; flex-direction: column; background: #161618; transform: translateX(100%); transition: transform 340ms cubic-bezier(0.32, 0.72, 0, 1); }
.ct-drawer.is-open .ct-drawer-bg { opacity: 1; }
.ct-drawer.is-open .ct-drawer-panel { transform: none; }
.ct-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: calc(14px + env(safe-area-inset-top, 0px)) 18px 14px; border-bottom: 1px solid #2c2c30; }
.ct-drawer-head p { margin: 0; font: 800 22px / 1 var(--hha-font-display); color: var(--hha-ink) !important; }
.ct-drawer-head button { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--ct-raise); color: var(--hha-ink); cursor: pointer; }
.ct-drawer-head svg { width: 18px; height: 18px; }
.ct-drawer .ct { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px calc(20px + env(safe-area-inset-bottom, 0px)); }
.ct-loading { display: grid; justify-items: center; gap: 14px; padding: 48px 0; color: #a1a1a6; font-size: 14.5px; }
.ct-loading::before { content: ""; width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(255, 61, 154, 0.25); border-top-color: #ff3d9a; animation: ct-spin 700ms linear infinite; }
.ct-loading::after { content: "Loading your cart"; }
@keyframes ct-spin { to { transform: rotate(360deg); } }
@keyframes ct-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ct-drawer-panel, .ct-line { transition: none !important; } .ct-loading::before { animation-duration: 1.6s; } }
@media (hover: hover) and (pointer: fine) { .ct-xs-card a:hover img { opacity: 0.9; } }
/* the column never grows wider than the screen (the suggestion row scrolls inside it) */
.ct-grid { grid-template-columns: minmax(0, 1fr); }
.ct-main > *, .ct-side > * { min-width: 0; }

/* drawer: the lines scroll, the checkout stays put */
.ct-drawer .ct { display: flex; flex-direction: column; padding: 0 !important; overflow: hidden !important; }
.ct-drawer .ct-grid { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 0; }
.ct-drawer .ct-main { display: block; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px; }
.ct-drawer .ct-main > * + * { margin-top: 16px; }
.ct-drawer .ct-ship { min-height: 0; flex: none; }
.ct-drawer .ct-side { flex: none; padding: 12px 18px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #2c2c30; background: #161618; box-shadow: 0 -12px 24px -16px rgba(0, 0, 0, 0.8); }
.ct-drawer .ct-loading { margin: 20px auto; }
.ct.is-busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 3px solid rgba(255, 61, 154, 0.25); border-top-color: #ff3d9a; animation: ct-spin 700ms linear infinite; pointer-events: none; }
.ct.is-busy { position: relative; }