/* ═══════════════════════════════════════════════════
   ATLAS — GLOBAL SIDE CART DRAWER
   Layout per Figma 593:8141 · Atlas dark/gold palette
   Loaded on every page (markup lives in footer.php)
═══════════════════════════════════════════════════ */

.atlas-cart-drawer {
    --acd-bg:        #0B1420;
    --acd-card:      #0E1721;
    --acd-card-2:    #122031;
    --acd-gold:      #AF8843;
    --acd-gold-lt:   #EAC861;
    --acd-border:    rgba(200, 169, 81, 0.28);
    --acd-hairline:  rgba(255, 255, 255, 0.08);
    --acd-muted:     rgba(255, 255, 255, 0.62);  /* WCAG AA: .50 was 4.9:1, marginal */
    --acd-soft:      rgba(255, 255, 255, 0.82);
    --acd-blue:      linear-gradient(to top, #2A6FB8, #18394A);  /* light stop was #4D9BF4 — 2.87:1 with white text, failed WCAG AA. #2A6FB8 = 5.17:1 */

    position: fixed;
    inset: 0;
    z-index: 99999;
    visibility: hidden;
    pointer-events: none;
}
.atlas-cart-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
}

body.atlas-drawer-open { overflow: hidden; }

/* ── Overlay ── */
.atlas-cart-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 5, 12, 0.72);
    opacity: 0;
    transition: opacity 0.28s ease;
}
.atlas-cart-drawer.is-open .atlas-cart-drawer__overlay { opacity: 1; }

/* ── Panel (477px in Figma) ── */
.atlas-cart-drawer__panel {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 477px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--acd-bg);
    border-left: 1px solid var(--acd-border);
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.atlas-cart-drawer.is-open .atlas-cart-drawer__panel { transform: translateX(0); }

.atlas-cart-drawer.is-busy .atlas-cart-drawer__panel {
    opacity: 0.6;
    pointer-events: none;
}

/* ── Scroll region ── */
.atlas-cart-drawer__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.atlas-cart-drawer__scroll::-webkit-scrollbar { width: 6px; }
.atlas-cart-drawer__scroll::-webkit-scrollbar-thumb {
    background: rgba(175, 136, 67, 0.35);
    border-radius: 3px;
}

/* ── Header: title left, X top-right, hairline under ── */
.atlas-cart-drawer__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0 14px;
    border-bottom: 1px solid var(--acd-hairline);
}
.atlas-cart-drawer__title {
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: -0.2px;
    color: #FFFFFF;
}
.atlas-cart-drawer__close {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--acd-muted);
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}
.atlas-cart-drawer__close:hover { color: var(--acd-gold-lt); transform: rotate(90deg); }
.atlas-cart-drawer__close svg { width: 100%; height: 100%; }

/* ═══ LINE ITEM ═══
   [image 70×100] [ title / variant / trash ]
                  [ prices          − qty + ] */
.atlas-cart-drawer__item {
    display: flex;
    gap: 16px;
    align-items: stretch;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--acd-hairline);
}
.atlas-cart-drawer__item:last-of-type { border-bottom: 0; }

.atlas-cart-drawer__item-img {
    flex: 0 0 70px;
    width: 70px;
    height: 100px;
    border: 1px solid var(--acd-border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--acd-card);
    display: block;
}
.atlas-cart-drawer__item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.atlas-cart-drawer__item-main {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
}

/* Top row */
.atlas-cart-drawer__item-top {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.atlas-cart-drawer__item-titles {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.atlas-cart-drawer__item-name {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0.1px;
    color: #FFFFFF;
    text-decoration: none;
}
.atlas-cart-drawer__item-name:hover { color: var(--acd-gold-lt); }

.atlas-cart-drawer__item-variant,
.atlas-cart-drawer__item-variant p {
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.2px;
    color: var(--acd-muted);
}
.atlas-cart-drawer__item-variant dl,
.atlas-cart-drawer__item-variant dt,
.atlas-cart-drawer__item-variant dd {
    display: inline;
    margin: 0;
    font-weight: 400;
}

.atlas-cart-drawer__remove {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--acd-muted);
    cursor: pointer;
    transition: color 0.2s ease;
}
.atlas-cart-drawer__remove:hover { color: #E5715F; }
.atlas-cart-drawer__remove svg { width: 100%; height: 100%; }

/* Bottom row */
.atlas-cart-drawer__item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.atlas-cart-drawer__item-pricing {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.atlas-cart-drawer__item-prices {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.atlas-cart-drawer__was,
.atlas-cart-drawer__was .amount {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: var(--acd-muted);
    text-decoration: line-through;
}
.atlas-cart-drawer__now,
.atlas-cart-drawer__now .amount {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.1px;
    color: #FFFFFF;
}
/* Figma uses red for the savings flag; Atlas uses gold. */
.atlas-cart-drawer__off {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.2px;
    color: var(--acd-gold-lt);
}

/* Quantity stepper */
.atlas-cart-drawer__qty {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid var(--acd-border);
    border-radius: 6px;
    background: var(--acd-card);
}
.atlas-cart-drawer__qty-btn {
    width: 14px;
    height: 14px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    color: var(--acd-gold);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease;
}
.atlas-cart-drawer__qty-btn:hover { color: var(--acd-gold-lt); }
.atlas-cart-drawer__qty-val {
    min-width: 12px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    line-height: 16px;
    color: #FFFFFF;
    text-align: center;
}

/* ═══ BEFORE YOU GO (cross-sells) ═══ */
.atlas-cart-drawer__suggest {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.atlas-cart-drawer__suggest-title {
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 21px;
    letter-spacing: 0.1px;
    color: #FFFFFF;
}
.atlas-cart-drawer__suggest-card {
    display: flex;
    gap: 16px;
    padding: 10px;
    border: 1px solid var(--acd-border);
    border-radius: 8px;
    background: var(--acd-card);
}
.atlas-cart-drawer__suggest-img {
    flex: 0 0 70px;
    width: 70px;
    height: 100px;
    border-radius: 4px;
    overflow: hidden;
    display: block;
}
.atlas-cart-drawer__suggest-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.atlas-cart-drawer__suggest-main {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
}
.atlas-cart-drawer__suggest-name {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 17px;
    letter-spacing: 0.8px;
    color: #FFFFFF;
    text-decoration: none;
}
.atlas-cart-drawer__suggest-name:hover { color: var(--acd-gold-lt); }
.atlas-cart-drawer__suggest-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}
.atlas-cart-drawer__suggest-price,
.atlas-cart-drawer__suggest-price .amount {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
}
.atlas-cart-drawer__suggest-price del { opacity: 0.5; font-weight: 400; }
.atlas-cart-drawer__suggest-add {
    flex: 0 0 auto;
    min-width: 81px;
    padding: 10px 14px;
    background: var(--acd-gold);
    border: 0;
    border-radius: 4px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1px;
    color: #0B1420;
    cursor: pointer;
    transition: filter 0.18s ease;
}
.atlas-cart-drawer__suggest-add:hover { filter: brightness(1.12); }

/* ═══ FREE SHIPPING PROGRESS ═══
   Threshold comes from the live WooCommerce free_shipping method
   (atlas_free_shipping_threshold), so the bar cannot drift from the
   actual rule. Compliance: this is a shipping/price statement only —
   no urgency or consumption framing. */
.atlas-cart-drawer__ship {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 4px;
}
.atlas-cart-drawer__ship-text {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: var(--acd-soft);
}
.atlas-cart-drawer__ship-text strong,
.atlas-cart-drawer__ship-text .amount {
    font-weight: 700;
    color: var(--acd-gold-lt);
}
.atlas-cart-drawer__ship-check {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: var(--acd-gold-lt);
}
.atlas-cart-drawer__ship-track {
    position: relative;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.09);
    overflow: hidden;
}
.atlas-cart-drawer__ship-fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #7D5F2C 0%, #AF8843 60%, #EAC861 100%);
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.atlas-cart-drawer__ship.is-qualified .atlas-cart-drawer__ship-text { color: var(--acd-gold-lt); }
.atlas-cart-drawer__ship.is-qualified .atlas-cart-drawer__ship-fill {
    background: linear-gradient(90deg, #AF8843 0%, #EAC861 100%);
}

/* ═══ FOOTER (sticky, shadowed — Figma drop-shadow 0 -6px) ═══ */
.atlas-cart-drawer__footer {
    flex: 0 0 auto;
    padding: 24px 20px 28px;
    background: var(--acd-card);
    border-top: 1px solid var(--acd-border);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.atlas-cart-drawer__subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.atlas-cart-drawer__subtotal-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.1px;
    color: #FFFFFF;
}
.atlas-cart-drawer__subtotal-count {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    color: var(--acd-muted);
}
.atlas-cart-drawer__subtotal-amount,
.atlas-cart-drawer__subtotal-amount .amount {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.1px;
    color: var(--acd-gold-lt);
}

.atlas-cart-drawer__btn {
    display: block;
    width: 100%;
    padding: 15px 20px;
    background: var(--acd-blue);
    border: 0;
    border-radius: 6px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-align: center;
    color: #FFFFFF;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.18s ease;
}
.atlas-cart-drawer__btn:hover { filter: brightness(1.12); color: #FFFFFF; }

.atlas-cart-drawer__btn-secondary {
    display: block;
    width: 100%;
    padding: 12px 20px;
    background: transparent;
    border: 1px solid var(--acd-border);
    border-radius: 6px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.2px;
    text-align: center;
    color: var(--acd-gold);
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
}
.atlas-cart-drawer__btn-secondary:hover {
    background: rgba(175, 136, 67, 0.10);
    color: var(--acd-gold-lt);
}

.atlas-cart-drawer__note {
    margin: 0;
    text-align: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: var(--acd-muted);
}

/* ═══ EMPTY / LOADING ═══ */
.atlas-cart-drawer__empty {
    padding: 48px 0;
    text-align: center;
}
.atlas-cart-drawer__empty-title {
    margin: 0 0 8px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.1px;
    color: #FFFFFF;
}
.atlas-cart-drawer__empty p {
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    color: var(--acd-muted);
}
.atlas-cart-drawer__loading {
    padding: 48px 0;
    text-align: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    color: var(--acd-muted);
}
.atlas-cart-drawer__loading a { color: var(--acd-gold); }

/* ═══ HEADER CART BADGE ═══ */
.atlas-dark-header__cart-btn { position: relative; }
.atlas-cart-count {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--atlas-gold, #AF8843);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #0B1420;
}
.atlas-cart-count.is-empty { display: none; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 520px) {
    .atlas-cart-drawer__panel { width: 100%; border-left: 0; }
    .atlas-cart-drawer__scroll { padding: 8px 16px 20px; }
    .atlas-cart-drawer__footer { padding: 20px 16px 24px; }
    .atlas-cart-drawer__item-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* ═══ ACCESSIBILITY (WCAG 2.1 AA) ═══
   2.4.7 Focus Visible — the drawer's steppers, remove buttons and close
   control are all <button>s with no default focus ring on this dark
   surface. Keyboard users could not tell what was focused. */
.atlas-cart-drawer :is(a, button, input, [tabindex]):focus-visible {
    outline: 2px solid var(--acd-gold-lt);
    outline-offset: 2px;
    border-radius: 4px;
}

/* The remove button's only label was an icon — give it a visible focus
   target and rely on its aria-label for screen readers (already set). */
.atlas-cart-drawer__remove:focus-visible { color: var(--acd-gold-lt); }

/* ═══════════════════════════════════════════════════════════════
   TAP TARGETS  (WCAG 2.5.5 / Apple HIG 44pt / Material 48dp)
   ---------------------------------------------------------------
   MEASURED: the drawer's qty +/- buttons were 14×14px, remove 16×16,
   close 24×24. A fingertip contact patch is ~9mm ≈ 44px. These were
   effectively untappable on a phone — in the component buyers touch
   most.

   The trick: keep the ICON small (the design is right) but expand the
   HIT AREA around it. Negative margins absorb the extra size so the
   visual layout does not shift.
═══════════════════════════════════════════════════════════════ */
.atlas-cart-drawer__qty-btn {
    width: 40px;
    height: 40px;
    margin: -12px -8px;   /* absorb the growth — layout unchanged */
    font-size: 18px;
}
.atlas-cart-drawer__qty {
    gap: 4px;
    padding: 4px 8px;
}
.atlas-cart-drawer__remove {
    width: 40px;
    height: 40px;
    margin: -12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.atlas-cart-drawer__remove svg { width: 16px; height: 16px; }

.atlas-cart-drawer__close {
    width: 44px;
    height: 44px;
    margin: -10px -10px -10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.atlas-cart-drawer__close svg { width: 22px; height: 22px; }

/* On touch devices, go the full 44 and stop pretending. */
@media (pointer: coarse) {
    .atlas-cart-drawer__qty-btn { width: 44px; height: 44px; }
    .atlas-cart-drawer__remove  { width: 44px; height: 44px; }
    .atlas-cart-drawer__btn,
    .atlas-cart-drawer__btn-secondary { min-height: 48px; }
    .atlas-cart-drawer__suggest-add   { min-height: 44px; }
}