/* ════════════════════════════════════════════════════════════════════
   Phase T.4 — /cart page-specific Picsin Teal overrides
   ════════════════════════════════════════════════════════════════════
   Page-specific override sheet for the cart page. Loaded AFTER
   picsin-teal.css (which is loaded after atelier-cart.css), so anything
   here wins the cascade.

   Hard rules:
   - DO NOT edit atelier-cart.css.
   - DO NOT touch CartController, PicsinCart, applyCoupon, totals math.
   - All teal CTAs use !important on color/background to defend against
     the .atl-root :where(button) reset and the global .atl-cta umber
     declarations in atelier-print-create.css.
   - Append-only — future T.4 polish lands at the bottom of this file.
   ──────────────────────────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════════════
   T.4.1 — Page title + section H2 + modal h3
   ════════════════════════════════════════════════════════════════════
   atelier-cart.css ships every display heading as italic serif at
   weight 400. picsin-teal.css already collapses --serif → Noto Sans,
   but italic + thin weight still reads "Atelier". Force semibold,
   non-italic, slate ink across all three heading levels.
   ──────────────────────────────────────────────────────────────────── */
.atl-cart-title,
.atl-cart-h2,
.atl-cart-empty-title,
.atl-cart-tnc-head h3 {
    font-style: normal !important;
    font-weight: 600 !important;
    color: var(--pt-slate) !important;
    letter-spacing: -0.005em !important;
}
.atl-cart-title       { font-size: 32px !important; }
.atl-cart-h2          { font-size: 20px !important; }
.atl-cart-empty-title { font-size: 28px !important; }
.atl-cart-tnc-head h3 { font-size: 18px !important; }


/* ════════════════════════════════════════════════════════════════════
   T.4.2 — Item card: name + price weight, card border refinement
   ════════════════════════════════════════════════════════════════════
   Source weights are 400 — looks anaemic in Noto Sans. Bump to 600
   for the name and price; tighten the card border to slate-rule.
   ──────────────────────────────────────────────────────────────────── */
.atl-cart-item {
    border-color: var(--pt-rule) !important;
    border-radius: var(--pt-radius-lg) !important;
}
.atl-cart-item:hover {
    border-color: var(--pt-teal) !important;
    box-shadow: var(--pt-shadow-sm) !important;
}
.atl-cart-name {
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    color: var(--pt-slate) !important;
    line-height: 1.25 !important;
}
.atl-cart-price {
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    color: var(--pt-slate) !important;
    font-variant-numeric: tabular-nums !important;
}
.atl-cart-qty {
    color: var(--pt-ink-3) !important;
}
.atl-cart-thumb {
    background: var(--pt-band) !important;
    border-color: var(--pt-rule) !important;
    border-radius: var(--pt-radius) !important;
}


/* ════════════════════════════════════════════════════════════════════
   T.4.3 — Pills (size, orientation, "Your photo")
   ════════════════════════════════════════════════════════════════════
   Keep the pill markup (per Naman's "keep current pill chips" answer).
   Retone: solid pill on white with slate border + slate-2 ink.
   "Your photo" pill (the dashed soft variant) → solid teal-tint
   instead of dashed umber outline.
   ──────────────────────────────────────────────────────────────────── */
.atl-cart-pill {
    background: var(--pt-bg) !important;
    border: 1px solid var(--pt-rule) !important;
    color: var(--pt-ink-2) !important;
    font-size: 12px !important;
    padding: 4px 10px !important;
    font-weight: 500 !important;
}
.atl-cart-pill-soft {
    background: var(--pt-teal-tint) !important;
    border: 1px solid var(--pt-teal-tint) !important;
    color: var(--pt-teal-700) !important;
    border-style: solid !important;
}


/* ════════════════════════════════════════════════════════════════════
   T.4.4 — Stepper (Cart / Shipping / Payment)
   ════════════════════════════════════════════════════════════════════
   Active dot already inherits teal via the legacy --accent token map.
   Polish: bigger dot (10px), bolder active label, brighter inactive.
   ──────────────────────────────────────────────────────────────────── */
.atl-cart-step-dot {
    width: 10px !important;
    height: 10px !important;
    background: var(--pt-rule-strong) !important;
}
.atl-cart-stepper li.is-active .atl-cart-step-dot {
    background: var(--pt-teal) !important;
    box-shadow: 0 0 0 3px rgba(27, 156, 133, 0.18) !important;
}
.atl-cart-stepper li.is-active .atl-cart-step-label {
    color: var(--pt-slate) !important;
    font-weight: 700 !important;
}
.atl-cart-stepper li + li::before {
    background: var(--pt-rule) !important;
}


/* ════════════════════════════════════════════════════════════════════
   T.4.5 — Coupon Apply CTA
   ════════════════════════════════════════════════════════════════════
   Source: black/slate at rest, hovers to umber-mapped accent. Picsin
   Teal wants TEAL at rest, teal-700 hover. !important to defend
   against .atl-root :where(button) and global button resets.
   ──────────────────────────────────────────────────────────────────── */
.atl-cart-coupon-apply {
    background: var(--pt-teal) !important;
    border: 1px solid var(--pt-teal) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
    border-radius: var(--pt-radius) !important;
}
.atl-cart-coupon-apply:hover {
    background: var(--pt-teal-700) !important;
    border-color: var(--pt-teal-700) !important;
    color: #FFFFFF !important;
}


/* ════════════════════════════════════════════════════════════════════
   T.4.6 — Coupon chip "apply" link hover
   ════════════════════════════════════════════════════════════════════
   atelier-cart.css line 385 hard-codes #5e4527 on hover (umber).
   Force teal-700 + remove the text-decoration underline noise.
   ──────────────────────────────────────────────────────────────────── */
.atl-cart-coupon-chip-apply {
    color: var(--pt-teal) !important;
    font-weight: 600 !important;
}
.atl-cart-coupon-chip-apply:hover {
    color: var(--pt-teal-700) !important;
    text-decoration: none !important;
}
.atl-cart-coupon-chip-info:hover {
    color: var(--pt-teal) !important;
}
.atl-cart-coupon-chip {
    border-color: var(--pt-rule) !important;
    border-radius: var(--pt-radius) !important;
}
.atl-cart-coupon-chip:hover {
    border-color: var(--pt-teal) !important;
}
.atl-cart-coupon-chip-code {
    color: var(--pt-slate) !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
}


/* ════════════════════════════════════════════════════════════════════
   T.4.7 — Discount line colour (Product Discount + Coupon Discount)
   ════════════════════════════════════════════════════════════════════
   Per Naman 2026-05-01: keep teal-700 (current behaviour). The legacy
   --accent-2 token already maps to teal-700 in picsin-teal.css; this
   override is a no-op visually but locked in for explicit auditability.
   ──────────────────────────────────────────────────────────────────── */
.atl-cart-totals-row.is-discount dd {
    color: var(--pt-teal-700) !important;
    font-weight: 600 !important;
}


/* ════════════════════════════════════════════════════════════════════
   T.4.8 — Summary card chrome
   ════════════════════════════════════════════════════════════════════
   White card, slate-rule border, soft Picsin Teal shadow. Tightens
   the divider under "Cart Summary" header.
   ──────────────────────────────────────────────────────────────────── */
.atl-cart-summary {
    background: var(--pt-card) !important;
    border: 1px solid var(--pt-rule) !important;
    border-radius: var(--pt-radius-lg) !important;
    box-shadow: var(--pt-shadow-sm) !important;
}
.atl-cart-summary-h {
    border-bottom: 1px solid var(--pt-rule) !important;
    padding-bottom: 14px !important;
}
.atl-cart-totals-row {
    color: var(--pt-ink-2) !important;
}
.atl-cart-totals-row dt {
    color: var(--pt-ink-2) !important;
}
.atl-cart-totals-row dd {
    color: var(--pt-slate) !important;
    font-variant-numeric: tabular-nums !important;
}


/* ════════════════════════════════════════════════════════════════════
   T.4.9 — "Total" row
   ════════════════════════════════════════════════════════════════════
   Source ships italic serif label + serif numeric value. Force
   non-italic semibold/bold slate, weight differentials between
   label and amount.
   ──────────────────────────────────────────────────────────────────── */
.atl-cart-totals-row.is-total {
    border-top: 1px solid var(--pt-rule-strong) !important;
    padding-top: 16px !important;
    margin-top: 10px !important;
}
.atl-cart-totals-row.is-total dt {
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: var(--pt-slate) !important;
}
.atl-cart-totals-row.is-total dd {
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    color: var(--pt-slate) !important;
    font-variant-numeric: tabular-nums !important;
}


/* ════════════════════════════════════════════════════════════════════
   T.4.10 — Global .atl-cta primitive (scoped to cart page)
   ════════════════════════════════════════════════════════════════════
   atelier-print-create.css ships .atl-cta with --accent background
   (umber-mapped) and #5e4527 hardcoded hover. Cart inherits this
   because that file is loaded site-wide. Scope every .atl-cta inside
   .atl-cart-page to teal/teal-700.

   Used by:
     • "Continue shopping" (.atl-cart-empty-cta) — empty state
     • "Proceed to Shipping" (.atl-cart-cta) — summary CTA
   ──────────────────────────────────────────────────────────────────── */
.atl-cart-page .atl-cta {
    background: var(--pt-teal) !important;
    color: #FFFFFF !important;
    border-radius: var(--pt-radius) !important;
    border: 1px solid var(--pt-teal) !important;
}
.atl-cart-page .atl-cta:hover {
    background: var(--pt-teal-700) !important;
    border-color: var(--pt-teal-700) !important;
    color: #FFFFFF !important;
}
.atl-cart-page .atl-cta:active {
    transform: translateY(1px);
}
.atl-cart-page .atl-cta-icon {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #FFFFFF !important;
    border-radius: var(--pt-radius-sm) !important;
}
.atl-cart-page .atl-cta-main > span:first-child {
    color: #FFFFFF !important;
    font-weight: 600 !important;
    font-size: 15px !important;
}
.atl-cart-page .atl-cta-sub {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 400 !important;
    font-size: 11px !important;
}


/* ════════════════════════════════════════════════════════════════════
   T.4.11 — Empty-cart state
   ════════════════════════════════════════════════════════════════════
   Per Naman 2026-05-01: "restyle to Picsin Teal".
   Source is dashed umber border + italic serif title + cream card.
   Replace with: solid white card + slate-rule border + crisp shadow,
   semibold non-italic title, teal CTA (already covered by T.4.10).
   ──────────────────────────────────────────────────────────────────── */
.atl-cart-empty {
    background: var(--pt-card) !important;
    border: 1px solid var(--pt-rule) !important;
    border-radius: var(--pt-radius-lg) !important;
    box-shadow: var(--pt-shadow-sm) !important;
    padding: 56px 32px !important;
}
.atl-cart-empty-icon {
    color: var(--pt-teal) !important;
}
.atl-cart-empty-sub {
    color: var(--pt-ink-2) !important;
    font-size: 14px !important;
}


/* ════════════════════════════════════════════════════════════════════
   T.4.12 — T&C modal: backdrop + close button + body
   ════════════════════════════════════════════════════════════════════
   Backdrop tint goes from warm umber rgba(31,26,20,.5) to slate
   rgba(44,55,66,.5). Modal chrome stays white card with slate
   border (already inherited via tokens). Close button hover.
   ──────────────────────────────────────────────────────────────────── */
.atl-cart-tnc-backdrop {
    background: rgba(44, 55, 66, 0.55) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}
.atl-cart-tnc-box {
    background: var(--pt-card) !important;
    border: 1px solid var(--pt-rule) !important;
    border-radius: var(--pt-radius-lg) !important;
    box-shadow: var(--pt-shadow-lg) !important;
}
.atl-cart-tnc-head {
    border-bottom: 1px solid var(--pt-rule) !important;
}
.atl-cart-tnc-close:hover {
    background: var(--pt-band) !important;
    color: var(--pt-slate) !important;
}
.atl-cart-tnc-body {
    color: var(--pt-ink) !important;
}


/* ════════════════════════════════════════════════════════════════════
   T.4.13 — Coupon input field + "or pick one" divider polish
   ════════════════════════════════════════════════════════════════════
   Focus ring already wins via --accent → --pt-teal. Polish placeholder
   weight + the divider rule colour.
   ──────────────────────────────────────────────────────────────────── */
.atl-cart-coupon-input {
    border: 1px solid var(--pt-rule) !important;
    border-radius: var(--pt-radius) !important;
    color: var(--pt-slate) !important;
    background: var(--pt-bg) !important;
}
.atl-cart-coupon-input::placeholder {
    color: var(--pt-ink-3) !important;
    font-weight: 500 !important;
    letter-spacing: .04em !important;
}
.atl-cart-coupon-input:focus {
    border-color: var(--pt-teal) !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(27, 156, 133, 0.14) !important;
}
.atl-cart-coupon-or {
    color: var(--pt-ink-3) !important;
    letter-spacing: .08em !important;
    font-weight: 500 !important;
}
.atl-cart-coupon-or::before,
.atl-cart-coupon-or::after {
    background: var(--pt-rule) !important;
}
.atl-cart-coupon-status {
    color: var(--pt-danger) !important;
    font-weight: 500 !important;
}
.atl-cart-coupon {
    background: var(--pt-card) !important;
    border: 1px solid var(--pt-rule) !important;
    border-radius: var(--pt-radius-lg) !important;
}
.atl-cart-section-sub {
    color: var(--pt-ink-2) !important;
}
.atl-cart-summary-fineprint {
    color: var(--pt-ink-3) !important;
}
.atl-cart-coupon-remove {
    color: var(--pt-ink-3) !important;
}
.atl-cart-coupon-remove:hover {
    color: var(--pt-danger) !important;
}


/* ════════════════════════════════════════════════════════════════════
   T.4 misc — Edit / Remove links + subtitle + danger hover
   ────────────────────────────────────────────────────────────────────
   Token-driven already, but force explicit slate ink so they don't
   pick up any residual Atelier umber from inherited cascade.
   ──────────────────────────────────────────────────────────────────── */
.atl-cart-link {
    color: var(--pt-ink-2) !important;
    font-weight: 500 !important;
}
.atl-cart-link:hover {
    color: var(--pt-teal) !important;
}
.atl-cart-link.is-danger {
    color: var(--pt-ink-3) !important;
}
.atl-cart-link.is-danger:hover {
    color: var(--pt-danger) !important;
}
.atl-cart-subtitle {
    color: var(--pt-ink-2) !important;
}


/* ════════════════════════════════════════════════════════════════════
   T.4 ROUND 2 (2026-05-01) — title block lifted outside grid
   ════════════════════════════════════════════════════════════════════
   The .atl-cart-head was moved OUT of .atl-cart-grid > .atl-cart-left
   in the Blade so the title now sits above the grid (mirrors shipping
   page pattern). This top-aligns the items list with the Cart Summary
   card top in the right column.

   Polish here:
     R2.1 — Margin under the lifted .atl-cart-head so the grid breathes.
     R2.2 — Tighter top padding on the items list (it was previously
            below the title's 20px margin; now it's at the grid top).
   ──────────────────────────────────────────────────────────────────── */
.atl-cart-head {
    margin-bottom: 26px !important;
}
.atl-cart-list {
    margin-top: 0 !important;
}