/* ==========================================================================
   COSMOSKIN — Account Desktop Redesign (v2)
   --------------------------------------------------------------------------
   Presentation-only desktop refinement of the authenticated account workspace.
   Loaded AFTER every existing account stylesheet on /account/profile.html.

   HARD SCOPE RULE: every rule in this file lives inside @media (min-width:1024px).
   The committed mobile experience (<=1023px) is frozen and untouched.

   Design system (see project brief Stage 2):
     workspace max   1200px      sidebar 272px       column gap 32px
     spacing         4/8/12/16/24/32/40
     radius          card 18 · well 14 · pill 999
     surface         page = warm gradient · panel #fffdf8 · well #fbf6ee
     border          hairline var(--cs-border)
     shadow          one soft rest shadow · no stacked/heavy shadows
     type            H1 serif 30px · overline 11px bronze · body 13.5px
     buttons         primary matte-black · secondary ivory+hairline
                     tertiary bronze-text · destructive isolated red
   ========================================================================== */

@media (min-width: 1024px) {

  /* --- account-local tokens (desktop-only; aliased to the existing
         COSMOSKIN --cs-* tokens from account-premium.css so there is a
         single source of truth — fallbacks mirror the shipped values) ---- */
  .account-premium-page {
    --csd-maxw: 1200px;
    --csd-side: 288px;
    --csd-gap: 32px;
    --csd-ink: var(--cs-text, #17130f);
    --csd-panel: var(--cs-surface, #fffdf8);
    --csd-well: var(--cs-surface-soft, #fbf6ee);
    --csd-line: var(--cs-border, rgba(42, 32, 24, .10));
    --csd-line-strong: var(--cs-border-strong, rgba(42, 32, 24, .16));
    --csd-muted: #6f6256;
    --csd-soft: #8b8177;
    --csd-bronze: #a97b45; /* between --cs-bronze and --cs-bronze-dark; kept literal to preserve the approved tone */
    --csd-radius: 18px;
    --csd-radius-sm: 14px;
    --csd-shadow: 0 14px 40px rgba(40, 30, 20, .05); /* deliberately softer than --cs-card-shadow */
    --csd-danger: #a8402f;
  }

  /* ======================================================================
     1 · WORKSPACE + LAYOUT
     ====================================================================== */
  .account-premium-page .cs-account-layout {
    max-width: var(--csd-maxw) !important;
    margin-inline: auto !important;
    grid-template-columns: var(--csd-side) minmax(0, 1fr) !important;
    gap: var(--csd-gap) !important;
    padding-top: 30px !important;
    padding-bottom: 72px !important;
    align-items: start !important;
  }

  .account-premium-page .cs-account-content {
    display: grid !important;
    gap: 20px !important;
    min-width: 0 !important;
  }

  /* ======================================================================
     2 · SIDEBAR
     ====================================================================== */
  .account-premium-page .cs-account-sidebar {
    position: sticky !important;
    top: 96px !important;
    display: grid !important;
    gap: 14px !important;
    align-content: start !important;
  }

  /* Identity card — calmer, safe truncation */
  .account-premium-page .cs-profile-card {
    box-shadow: var(--csd-shadow) !important;
    border-radius: var(--csd-radius) !important;
  }
  .account-premium-page .cs-profile-card #accountName,
  .account-premium-page .cs-profile-card #accountEmail {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .account-premium-page .cs-profile-info {
    min-width: 0;
  }
  /* Member-since value: fit "30 Mayıs 2025" without ellipsis clipping */
  .account-premium-page .cs-profile-meta-item b {
    font-size: 15px !important;
    white-space: nowrap;
    letter-spacing: -.01em;
  }
  .account-premium-page #accountMemberSince {
    font-size: 12.5px !important;
    letter-spacing: -.01em;
  }
  .account-premium-page .cs-profile-card__meta {
    gap: 10px !important;
  }
  /* Meta labels ("TOPLAM PUAN" / "ÜYE TARİHİ") must not wrap */
  .account-premium-page .cs-profile-meta-item small {
    white-space: nowrap !important;
    font-size: 9px !important;
    letter-spacing: .1em !important;
  }

  /* Navigation — one coherent system */
  .account-premium-page .cs-account-nav {
    border-radius: var(--csd-radius) !important;
    box-shadow: var(--csd-shadow) !important;
    padding: 8px !important;
    display: grid !important;
    gap: 1px !important;
    background: rgba(255, 253, 248, .94) !important;
  }
  .account-premium-page .cs-account-nav .cs-nav-label {
    padding: 15px 16px 7px !important;
    font: 800 10px/1 var(--cs-sans) !important;
    letter-spacing: .16em !important;
    color: var(--csd-soft) !important;
    text-transform: uppercase;
  }
  .account-premium-page .cs-account-nav .cs-nav-label:first-child {
    padding-top: 10px !important;
  }
  .account-premium-page .cs-account-nav a {
    position: relative;
    min-height: 42px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 12px !important;
    gap: 11px !important;
    font: 750 13px/1.2 var(--cs-sans) !important;
    color: #4c4238 !important;
    white-space: nowrap;
  }
  .account-premium-page .cs-account-nav a .cs-nav-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .account-premium-page .cs-account-nav a:hover {
    background: #f7efe3 !important;
    color: var(--csd-ink) !important;
  }
  .account-premium-page .cs-account-nav a:before { content: none !important; }
  .account-premium-page .cs-account-nav a.is-active,
  .account-premium-page .cs-account-nav a[aria-current="page"] {
    background: #f2e5d3 !important;
    color: var(--csd-ink) !important;
  }
  .account-premium-page .cs-account-nav a.is-active .cs-nav-icon,
  .account-premium-page .cs-account-nav a[aria-current="page"] .cs-nav-icon {
    background: #b78a55 !important;
    color: #fffaf3 !important;
    border-color: rgba(141, 102, 60, .38) !important;
  }
  .account-premium-page .cs-account-nav a .cs-nav-icon {
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
    border-radius: 9px !important;
  }
  .account-premium-page .cs-account-nav a em {
    min-width: 20px;
    height: 20px;
    font-size: 10.5px;
  }
  .account-premium-page .cs-account-nav a:focus-visible {
    outline: 2px solid rgba(169, 123, 69, .6) !important;
    outline-offset: 2px !important;
  }

  /* ---- Sidebar nav — premium hover micro-interaction --------------------- */
  .account-premium-page .cs-account-nav a {
    transition: background .2s ease, color .2s ease !important;
  }
  .account-premium-page .cs-account-nav a::before {
    content: none !important;
    display: none !important;
  }
  /* icon nudges toward its label on hover */
  .account-premium-page .cs-account-nav a .cs-nav-icon {
    transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease !important;
  }
  .account-premium-page .cs-account-nav a:hover .cs-nav-icon { transform: translateX(2px); }

  /* count badges — tabular; accented for real counts, ghosted for zeros */
  .account-premium-page .cs-account-nav a em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px !important;
    border-radius: 999px !important;
    font: 800 10.5px/1 var(--cs-sans) !important;
    font-variant-numeric: tabular-nums;
    background: rgba(181, 138, 74, .16) !important;
    color: #8a5f28 !important;
    border: 1px solid rgba(181, 138, 74, .22);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
  }
  .account-premium-page .cs-account-nav a.is-active em,
  .account-premium-page .cs-account-nav a[aria-current="page"] em {
    background: rgba(181, 138, 74, .26) !important;
    border-color: rgba(141, 102, 60, .35);
  }
  .account-premium-page .cs-account-nav a em.is-zero {
    background: transparent !important;
    color: #b9ad9f !important;
    border-color: transparent !important;
    font-weight: 700 !important;
  }
  @media (prefers-reduced-motion: reduce) {
    .account-premium-page .cs-account-nav a::before,
    .account-premium-page .cs-account-nav a .cs-nav-icon,
    .account-premium-page .cs-account-nav a { transition: none !important; }
    .account-premium-page .cs-account-nav a:hover .cs-nav-icon { transform: none; }
  }

  /* ---- Overview CTAs — one consistent button system across the cards ------
     The club card and skin card CTA rows differed (40 vs 42px, 10 vs 11.5px,
     uppercase vs sentence case). Unify the typographic spec; colours stay
     per-context (light-on-gold vs dark/outline on ivory). */
  .account-premium-page #overviewPanel .cs-club-mini__btn,
  .account-premium-page #overviewPanel .cs-skin-profile-card__btn {
    min-height: 42px !important;
    border-radius: 999px !important;
    font: 700 10.5px/1 var(--cs-sans) !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .16s ease !important;
  }
  .account-premium-page #overviewPanel .cs-club-mini__btn:active,
  .account-premium-page #overviewPanel .cs-skin-profile-card__btn:active { transform: scale(.985); }

  /* Logout — clearly separated */
  .account-premium-page .cs-logout {
    margin-top: 2px !important;
    border: 1px solid #17130f !important;
    border-radius: 12px !important;
    background: #17130f !important;
    color: #fffaf3 !important;
    min-height: 42px !important;
    font: 800 12px/1 var(--cs-sans) !important;
    letter-spacing: .06em;
  }
  .account-premium-page .cs-logout:hover {
    background: #792f2a !important;
    border-color: #792f2a !important;
    color: #fff !important;
  }

  /* ======================================================================
     3 · PANELS + PANEL HEADER GRAMMAR
     ====================================================================== */
  .account-premium-page .cs-panel {
    border-radius: var(--csd-radius) !important;
    box-shadow: var(--csd-shadow) !important;
    border-color: var(--csd-line) !important;
  }

  /* The persistent sidebar makes the per-panel "back to Hesabım" redundant */
  .account-premium-page .cs-panel-back { display: none !important; }

  .account-premium-page .cs-tab-title--premium,
  .account-premium-page .cs-tab-title {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 24px !important;
    flex-wrap: wrap;
  }
  .account-premium-page .cs-tab-title__copy { min-width: 0; }
  .account-premium-page .cs-tab-title h1 {
    font-family: var(--cs-serif) !important;
    font-weight: 500 !important;
    font-size: 30px !important;
    letter-spacing: -.02em !important;
    line-height: 1.06 !important;
    color: var(--csd-ink) !important;
    margin: 6px 0 0 !important;
  }
  .account-premium-page .cs-tab-title p {
    font-size: 13.5px !important;
    color: var(--csd-muted) !important;
    margin: 6px 0 0 !important;
  }
  .account-premium-page .cs-panel-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  /* ======================================================================
     4 · OVERVIEW — first-principles hierarchy
     Priority: 1 recent order · 2 club · 3 saved beauty (skin) + slim stats
     Redundant duplicate blocks are suppressed on desktop.
     ====================================================================== */

  /* Suppress destinations already owned by the sidebar / a primary module.
     The quick/security-summary modules carry explicit class hooks (added in
     account-dashboard.js) instead of :has() so the suppression cannot fail
     on engines without :has() support. */
  .account-premium-page #overviewPanel .cs-recs-rail,                 /* storefront carousel */
  .account-premium-page #overviewPanel .cs-account-pulse,            /* dup nav to notif/addr/club */
  .account-premium-page #overviewPanel .cs-overview-more,            /* dup of sidebar */
  .account-premium-page #overviewPanel .cs-overview-module--quick,
  .account-premium-page #overviewPanel .cs-overview-module--security-summary {
    display: none !important;
  }

  /* Overview home header — quiet, not a marketing hero */
  .account-premium-page #overviewPanel .cs-tab-title--home {
    display: block !important;
    margin-bottom: 4px;
  }
  .account-premium-page #overviewPanel .cs-tab-title--home h1 {
    font-size: 34px !important;
    margin-top: 8px !important;
  }
  /* Keep the overview masthead aligned with the panel grid. */
  .account-premium-page #overviewPanel .cs-tab-title--home {
    margin-top: 6px !important;
  }
  .account-premium-page #overviewPanel .cs-tab-title--home .cs-tab-title__copy {
    position: relative;
    padding-left: 0;
  }
  .account-premium-page #overviewPanel .cs-tab-title--home .cs-tab-title__copy::before {
    content: none;
    display: none;
  }
  .account-premium-page #overviewPanel .cs-tab-title--home .cs-overline {
    display: inline-block;
    color: #b58a4a !important;
  }

  /* Stats — refined editorial metric strip (Rhode / Aesop restraint):
     the serif figure is the hero, the label is a quiet micro-caption,
     and the icon is a soft gold chip that sits perfectly centered. */
  .account-premium-page #overviewPanel .cs-stat-grid--pulse {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  .account-premium-page #overviewPanel .cs-stat-grid--pulse .cs-stat {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    min-height: 0 !important;
    padding: 16px 18px !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    background: rgba(255, 253, 248, .72) !important;
    border: 1px solid var(--csd-line) !important;
  }
  /* soft gold icon chip — calmer than the saturated beige, aligned (no stray margin) */
  .account-premium-page #overviewPanel .cs-stat-grid--pulse .cs-stat-icon {
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    background: rgba(181, 138, 74, .10) !important;
    border: 1px solid rgba(181, 138, 74, .20) !important;
    color: #b58a4a !important;
    flex: 0 0 auto !important;
  }
  .account-premium-page #overviewPanel .cs-stat-grid--pulse .cs-stat > div {
    min-width: 0;
  }
  /* quiet uppercase micro-label (lang=tr → correct İ casing) */
  .account-premium-page #overviewPanel .cs-stat-grid--pulse .cs-stat small {
    display: block !important;
    font: 700 10px/1 var(--cs-sans) !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: var(--csd-soft) !important;
  }
  /* the metric is the hero: editorial serif figure, tabular for a clean strip */
  .account-premium-page #overviewPanel .cs-stat-grid--pulse .cs-stat strong {
    display: block !important;
    margin-top: 6px !important;
    font-family: var(--cs-serif) !important;
    font-size: 33px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: .01em !important;
    color: var(--csd-ink) !important;
    font-variant-numeric: lining-nums tabular-nums;
  }

  /* ---- Sidebar identity: stop the tier chip from clipping ---------------
     The "HESABIM" kicker + "Signature" chip together need ~185px but the
     identity column is only ~155px, so the chip overflowed the card's
     overflow:hidden edge and got sliced. Fix: tighten both, and let the
     kicker be the flex item that yields — the chip is never clipped. */
  .account-premium-page .cs-profile-card--v2 .cs-profile-info__top {
    justify-content: flex-start !important;
    gap: 8px !important;
    min-width: 0;
  }
  /* "HESABIM" kicker is redundant beside the name + email identity, and it
     forced the tier chip past the card's clipped edge. Retire it on desktop
     and let the Signature tier badge stand as the identity marker. */
  .account-premium-page .cs-profile-card--v2 .cs-profile-info__top .cs-profile-kicker {
    display: none !important;
  }
  .account-premium-page .cs-profile-card--v2 .cs-profile-tier {
    flex: 0 0 auto !important;
    gap: 5px !important;
    padding: 5px 11px 5px 9px !important;
    font-size: 9.5px !important;
    letter-spacing: .05em !important;
  }
  .account-premium-page .cs-profile-card--v2 .cs-profile-tier svg {
    width: 11px !important;
    height: 11px !important;
  }

  /* ---- Gold club card: elevate the "Signature" wordmark -----------------
     Was a plain serif word. Now an embossed foil membership mark: a champagne
     tier emblem (echoing the sidebar chip) + engraved-depth wordmark. */
  .account-premium-page #overviewPanel .cs-club-mini--signature .cs-club-mini__title-row {
    gap: 4px !important;
  }
  .account-premium-page #overviewPanel .cs-club-mini--signature h2 {
    display: inline-flex !important;
    align-items: center !important;
    gap: 11px !important;
    font-size: 34px !important;
    letter-spacing: -.01em !important;
    line-height: 1 !important;
    color: #fffaf3 !important;
    text-shadow: 0 1px 0 rgba(72, 45, 18, .28);
  }
  .account-premium-page #overviewPanel .cs-club-mini--signature h2::before {
    content: "";
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbe9cb' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2l1.9 5.3 5.3 1.9-5.3 1.9L12 17.6l-1.9-5.3L4.8 10.4l5.3-1.9L12 3.2Z'/%3E%3C/svg%3E") no-repeat center / contain;
    filter: drop-shadow(0 1px 1px rgba(60, 38, 14, .35));
  }

  /* Priority pair: club + skin. Stack full-width on narrow desktop where a
     half-width club card collides; go side-by-side only with real room. */
  .account-premium-page #overviewPanel .cs-overview-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    align-items: stretch;
  }
  .account-premium-page #overviewPanel .cs-overview-hero-grid > .cs-skin-profile-card--mini {
    grid-column: auto !important;
  }

  /* Module stack becomes a calm 2-column management area,
     with the recent order spanning full width as the hero */
  .account-premium-page #overviewPanel .cs-overview-modules {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    align-items: start !important;
  }
  .account-premium-page #overviewPanel .cs-overview-modules > .cs-overview-module--order {
    grid-column: 1 / -1 !important;
    order: -1;
  }
  .account-premium-page #overviewPanel .cs-overview-modules > .cs-coupon-strip {
    grid-column: 1 / -1 !important;
  }
  /* Buy Again spans full width and sits right after the recent order */
  .account-premium-page #overviewPanel .cs-overview-modules > .cs-buy-again {
    grid-column: 1 / -1 !important;
  }
  /* clean single row of three on desktop */
  .account-premium-page #overviewPanel .cs-buy-again .cs-product-mini-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  @media (max-width: 1160px) {
    .account-premium-page #overviewPanel .cs-buy-again .cs-product-mini-row {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }
  .account-premium-page #overviewPanel .cs-overview-module {
    box-shadow: var(--csd-shadow) !important;
    border-radius: var(--csd-radius) !important;
    margin: 0 !important;
  }

  /* Unified card-head label rhythm across overview modules */
  .account-premium-page #overviewPanel .cs-card-head > span {
    font: 800 10.5px/1 var(--cs-sans) !important;
    letter-spacing: .16em !important;
    color: var(--csd-soft) !important;
  }
  .account-premium-page #overviewPanel .cs-card-head a {
    font: 750 11.5px/1 var(--cs-sans) !important;
    color: var(--csd-bronze) !important;
    letter-spacing: .02em;
  }

  /* ======================================================================
     5 · BUTTON SYSTEM (one visual hierarchy)
     Secondary is the base; primary uses doubled-class specificity so it
     always wins over secondary regardless of source order. This also fixes
     a latent contrast bug where a descendant-anchor color rule turned the
     dark __btn--primary variants dark-text-on-dark (invisible labels).
     ====================================================================== */

  /* Secondary — ivory + hairline (base look for all account buttons) */
  .account-premium-page .cs-pill-btn,
  .account-premium-page .cs-mini-btn,
  .account-premium-page .cs-skin-profile-card__btn,
  .account-premium-page .cs-club-mini__btn,
  .account-premium-page .cs-order-spotlight__btn,
  .account-premium-page .cs-order-card__btn,
  .account-premium-page .cs-ticket__btn,
  .account-premium-page .cs-address-modal__btn {
    border: 1px solid var(--csd-line-strong) !important;
    background: rgba(255, 253, 248, .9) !important;
    color: #2a2119 !important;
    box-shadow: none !important;
  }
  .account-premium-page .cs-pill-btn:hover,
  .account-premium-page .cs-mini-btn:hover,
  .account-premium-page .cs-skin-profile-card__btn:hover,
  .account-premium-page .cs-club-mini__btn:hover,
  .account-premium-page .cs-order-spotlight__btn:hover,
  .account-premium-page .cs-order-card__btn:hover,
  .account-premium-page .cs-ticket__btn:hover,
  .account-premium-page .cs-address-modal__btn:hover {
    background: #f7efe3 !important;
    border-color: var(--csd-bronze) !important;
  }

  /* Primary — matte black + light label (both properties owned here, so
     contrast is guaranteed no matter the original background) */
  .account-premium-page .cs-pill-btn.cs-pill-btn--dark,
  .account-premium-page .cs-mini-btn.dark,
  .account-premium-page .cs-skin-profile-card__btn.cs-skin-profile-card__btn--primary,
  .account-premium-page .cs-club-mini__btn.cs-club-mini__btn--solid,
  .account-premium-page .cs-order-spotlight__btn.cs-order-spotlight__btn--primary,
  .account-premium-page .cs-order-card__btn.cs-order-card__btn--primary,
  .account-premium-page .cs-ticket__btn.cs-ticket__btn--primary,
  .account-premium-page .cs-address-modal__btn.cs-address-modal__btn--primary,
  .account-premium-page .cs-inv-studio__btn.cs-inv-studio__btn--dark,
  .account-premium-page .cs-pay-note__btn.cs-pay-note__btn--dark,
  .account-premium-page .cs-security-action__btn.cs-security-action__btn--dark,
  .account-premium-page .cs-pay-method__cta {
    background: var(--csd-ink) !important;
    color: #fdf7ee !important;
    border: 1px solid var(--csd-ink) !important;
    box-shadow: 0 10px 22px rgba(23, 19, 15, .16) !important;
  }
  .account-premium-page .cs-pill-btn.cs-pill-btn--dark:hover,
  .account-premium-page .cs-mini-btn.dark:hover,
  .account-premium-page .cs-skin-profile-card__btn.cs-skin-profile-card__btn--primary:hover,
  .account-premium-page .cs-club-mini__btn.cs-club-mini__btn--solid:hover,
  .account-premium-page .cs-order-spotlight__btn.cs-order-spotlight__btn--primary:hover,
  .account-premium-page .cs-order-card__btn.cs-order-card__btn--primary:hover,
  .account-premium-page .cs-ticket__btn.cs-ticket__btn--primary:hover,
  .account-premium-page .cs-address-modal__btn.cs-address-modal__btn--primary:hover,
  .account-premium-page .cs-inv-studio__btn.cs-inv-studio__btn--dark:hover,
  .account-premium-page .cs-pay-note__btn.cs-pay-note__btn--dark:hover,
  .account-premium-page .cs-security-action__btn.cs-security-action__btn--dark:hover,
  .account-premium-page .cs-pay-method__cta:hover {
    background: #241d16 !important;
  }

  /* Tertiary — quiet text */
  .account-premium-page .cs-pill-btn--quiet {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--csd-bronze) !important;
    box-shadow: none !important;
  }
  /* Destructive — isolated red tone (address delete: .cs-mini-btn[data-delete-address]) */
  .account-premium-page [data-delete-address] {
    color: var(--csd-danger) !important;
    border-color: rgba(168, 64, 47, .3) !important;
    background: rgba(168, 64, 47, .04) !important;
  }
  .account-premium-page [data-delete-address]:hover {
    background: rgba(168, 64, 47, .09) !important;
    border-color: rgba(168, 64, 47, .5) !important;
  }
  .account-premium-page .cs-pill-btn:focus-visible,
  .account-premium-page .cs-mini-btn:focus-visible {
    outline: 2px solid rgba(169, 123, 69, .6) !important;
    outline-offset: 2px !important;
  }

  /* ======================================================================
     6 · FORMS
     ====================================================================== */
  .account-premium-page .cs-form,
  .account-premium-page .cs-form-compact {
    max-width: 640px;
  }
  .account-premium-page .cs-form.cs-form--wide,
  .account-premium-page .cs-address-form {
    max-width: none;
  }
  .account-premium-page .cs-input,
  .account-premium-page .cs-form select,
  .account-premium-page .cs-form input,
  .account-premium-page .cs-form textarea {
    min-height: 44px;
  }
  .account-premium-page .cs-form textarea.cs-input,
  .account-premium-page .cs-form-compact textarea.cs-input {
    min-height: 112px;
  }
  .account-premium-page .cs-input:focus,
  .account-premium-page .cs-input:focus-visible {
    outline: 2px solid rgba(169, 123, 69, .5);
    outline-offset: 1px;
    border-color: var(--csd-bronze);
  }
  .account-premium-page .cs-form label > span,
  .account-premium-page .cs-form-compact label > span {
    font: 700 11.5px/1.2 var(--cs-sans);
    letter-spacing: .04em;
    color: #5c5147;
  }

  /* ======================================================================
     7 · EMPTY / LOADING / ERROR / GATE STATES
     ====================================================================== */
  .account-premium-page .cs-empty {
    text-align: center;
    padding: 40px 28px !important;
    max-width: 460px;
    margin-inline: auto;
  }
  .account-premium-page .cs-empty strong {
    font-family: var(--cs-serif);
    font-size: 22px;
    font-weight: 500;
    color: var(--csd-ink);
  }
  .account-premium-page .cs-empty p {
    color: var(--csd-muted);
    font-size: 13.5px;
  }

  .account-premium-page .cs-account-fatal-card,
  .account-premium-page .cs-account-gate {
    max-width: 560px !important;
    margin-inline: auto !important;
    border-radius: var(--csd-radius) !important;
    box-shadow: var(--csd-shadow) !important;
  }
  .account-premium-page .cs-account-gate h1 {
    font-family: var(--cs-serif) !important;
    font-weight: 500 !important;
    font-size: 38px !important;
    letter-spacing: -.02em;
    color: var(--csd-ink) !important;
  }

  /* Loading skeleton — reflect the real workspace to avoid layout shift */
  .account-premium-page .cs-loading-card--premium {
    max-width: var(--csd-maxw);
    margin-inline: auto;
    border-radius: var(--csd-radius);
    box-shadow: var(--csd-shadow);
  }

  /* ======================================================================
     8 · SUBCATEGORY POLISH (consistent grammar)
     ====================================================================== */

  /* Orders — breathing room, no cramped repeated buttons */
  .account-premium-page .cs-order-card {
    border-radius: var(--csd-radius-sm) !important;
  }

  /* Favorites — stable premium grid */
  .account-premium-page .cs-favorites-grid,
  .account-premium-page .cs-fav-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  /* Invoices — minimal document list */
  .account-premium-page .cs-inv-card {
    border-radius: var(--csd-radius-sm) !important;
  }

  /* Addresses — clear default hierarchy */
  .account-premium-page .cs-address-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  /* Security — full-panel list: no color-only status, no empty gaps */
  .account-premium-page .cs-security-list li {
    grid-template-columns: minmax(180px, .9fr) 1fr auto !important;
    align-items: center !important;
    gap: 14px !important;
  }
  .account-premium-page .cs-status-pill {
    letter-spacing: .08em;
  }

  /* Notifications — readable preference groups, not a dense table */
  .account-premium-page .cs-toggle-grid {
    gap: 12px !important;
  }

  /* Skin profile panel — FIX: account-premium.css line ~492 still carries
     ".cs-skin-products{grid-column:3}" from the retired 3-column
     cs-skin-content-grid layout. The current cs-skin-studio grid defines no
     columns, so above 1260px (where the max-width:1260 correction stops
     matching) the products rail collapses into a ~128px implicit track.
     Span it across the studio at every desktop width. */
  .account-premium-page .cs-skin-studio .cs-skin-products {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  /* Skin profile mini — FIX: the decorative aura renders position:relative,
     so it eats a ~430px grid row and leaves a huge empty gap above the
     content. Pull it out of flow as the background glow it is meant to be. */
  .account-premium-page .cs-skin-profile-card--mini {
    position: relative !important;
  }
  .account-premium-page .cs-skin-profile-card--mini > .cs-skin-profile-card__aura {
    position: absolute !important;
    inset: 0 !important;
    height: auto !important;
    width: auto !important;
    z-index: 0 !important;
    pointer-events: none;
  }
  .account-premium-page .cs-skin-profile-card--mini > *:not(.cs-skin-profile-card__aura) {
    position: relative;
    z-index: 1;
  }

  /* Club — premium membership, not a bank card (calm any metallic sheen) */
  .account-premium-page .cs-club-mini__sheen,
  .account-premium-page .cs-loyalty-card .cs-loyalty-card__sheen {
    opacity: .35 !important;
  }
  /* FIX: brand crown is iconSvg() -> <img>, but the source only sizes
     `.cs-club-mini__brand svg`, leaving the <img> unconstrained (rendered
     ~417px). Constrain the image so the header reads as designed. */
  .account-premium-page .cs-club-mini__brand img,
  .account-premium-page .cs-club-mini__brand .cs-icon {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
    object-fit: contain !important;
  }
  /* Same guard for any account card that places an iconSvg() image in a
     small brand/label chip and only sized the svg variant. */
  .account-premium-page .cs-overline .cs-icon,
  .account-premium-page .cs-card-head .cs-icon {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 auto;
  }

  /* ======================================================================
     9 · ICON / GLYPH HYGIENE (desktop)
     Neutralize decorative dingbat pseudo-content flagged in the audit.
     (Elite-tier only; mobile remains frozen.)
     ====================================================================== */
  .account-premium-page .cs-tier-card--elite:after,
  .account-premium-page .cs-loyalty-summary--elite:before {
    content: "" !important;
  }

  /* ======================================================================
     10 · MOTION
     ====================================================================== */
  @media (prefers-reduced-motion: reduce) {
    .account-premium-page .cs-profile-card__aura,
    .account-premium-page .cs-skin-profile-card__aura,
    .account-premium-page .cs-club-mini__sheen {
      animation: none !important;
    }
  }

}

/* ==========================================================================
   WIDE DESKTOP (>=1200px) — subset of the >=1024 desktop scope.
   Club + skin become the side-by-side priority pair only when the content
   column is wide enough for the club card to breathe.
   ========================================================================== */
@media (min-width: 1200px) {
  .account-premium-page #overviewPanel .cs-overview-hero-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .account-premium-page #overviewPanel .cs-overview-hero-grid > .cs-club-mini,
  .account-premium-page #overviewPanel .cs-overview-hero-grid > .cs-skin-profile-card--mini {
    grid-column: auto !important;
  }
}

/* ==========================================================================
   ACCOUNT TYPOGRAPHY + SEMANTIC STATES
   Account content intentionally uses one premium sans family. The global
   COSMOSKIN brand lockup and editorial footer remain outside this scope.
   ========================================================================== */
body.account-page {
  --cs-account-font: "Plus Jakarta Sans", Arial, sans-serif;
}
body.account-page .cs-account-shell,
body.account-page .cs-account-shell *,
body.account-page #accountModal,
body.account-page #accountModal *,
body.account-page #accountDrawer,
body.account-page #accountDrawer *,
body.account-page .cs-address-modal,
body.account-page .cs-address-modal *,
body.account-page .cs-toast,
body.account-page .cs-toast * {
  font-family: var(--cs-account-font) !important;
}
body.account-page.cs-mobile-v1-active #accountApp,
body.account-page.cs-mobile-v1-active #accountApp *,
body.account-page.cs-mobile-v1-active #accountModal,
body.account-page.cs-mobile-v1-active #accountModal * {
  font-family: var(--cs-account-font) !important;
}
body.account-page .cs-tab-title h1,
body.account-page .cs-account-welcome-card h1,
body.account-page .cs-panel-head h2,
body.account-page .cs-profile-info strong,
body.account-page .cs-profile-studio__hero h2,
body.account-page .cs-skin-studio__hero h2,
body.account-page .cs-inv-studio__hero h2,
body.account-page .cs-empty strong,
body.account-page .cs-truthful-state strong {
  font-weight: 650 !important;
  letter-spacing: -.025em !important;
}
body.account-page .cs-profile-info strong {
  font-size: 20px !important;
  line-height: 1.16 !important;
}
body.account-page #accountApp .cs-profile-card--v2 .cs-profile-display-name,
body.account-page #accountApp #overviewPanel .cs-stat-grid--pulse .cs-stat strong {
  font-family: var(--cs-account-font) !important;
}
body.account-page #accountApp .cs-profile-card--v2 .cs-profile-display-name {
  font-weight: 650 !important;
  letter-spacing: -.02em !important;
}
body.account-page #accountApp #overviewPanel .cs-stat-grid--pulse .cs-stat strong {
  font-weight: 680 !important;
  letter-spacing: -.025em !important;
}

/* Account panel mastheads -------------------------------------------------
   The content column used to begin with bare text exactly on the grid edge.
   On wide screens that made the left side of every tab title feel visually
   cropped.  Give the shared masthead a small editorial overhang and a soft,
   fading ivory surface while keeping cards and controls on the base grid. */
@media (min-width: 1024px) {
  .account-premium-page .cs-account-content .cs-tab-title {
    position: relative;
    isolation: isolate;
    width: calc(100% + 18px);
    margin-left: -18px !important;
    padding: 16px 22px 18px 14px !important;
    border-radius: 22px 20px 20px 22px;
    background: linear-gradient(
      105deg,
      rgba(255, 253, 248, .90) 0%,
      rgba(250, 243, 234, .62) 48%,
      rgba(250, 243, 234, .18) 82%,
      rgba(250, 243, 234, 0) 100%
    );
    box-shadow: inset 1px 0 0 rgba(181, 138, 74, .12);
  }

  .account-premium-page .cs-account-content .cs-tab-title::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 12px;
    bottom: 12px;
    left: -10px;
    width: 24px;
    border-radius: 999px;
    background: rgba(181, 138, 74, .08);
    filter: blur(10px);
    pointer-events: none;
  }

  /* Favorites needs a contained inset rather than the shared masthead
     overhang: its first product card otherwise reinforces the clipped edge. */
  .account-premium-page #favoritesPanel .cs-tab-title {
    width: 100%;
    margin-left: 0 !important;
    padding-left: 24px !important;
    border-radius: 22px !important;
    background: linear-gradient(105deg, rgba(255,253,248,.96), rgba(250,243,234,.5) 66%, rgba(250,243,234,.12)) !important;
  }
  .account-premium-page #favoritesPanel .cs-tab-title::before {
    content: none;
  }
  .account-premium-page #favoritesPanel .cs-favorites-grid--v6 {
    grid-template-columns: repeat(auto-fill, minmax(220px, 276px)) !important;
    gap: 24px 18px !important;
    padding: 22px 24px 28px !important;
    border: 1px solid rgba(42,32,22,.065);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255,253,249,.84), rgba(248,240,231,.42));
    box-shadow: 0 18px 48px rgba(46,34,22,.045), inset 1px 0 rgba(181,138,74,.08);
  }
}
body.account-page .cs-stat strong,
body.account-page .cs-profile-meta-item b,
body.account-page .cs-inv-studio__stats b,
body.account-page .cs-profile-studio__ring-label strong,
body.account-page .cs-skin-studio__ring-label strong {
  font-variant-numeric: tabular-nums;
  font-weight: 680 !important;
  letter-spacing: -.025em !important;
}

/* Secondary account destinations are reserved for the compact mobile hub.
   Desktop already exposes them in the persistent sidebar. */
.account-premium-page .cs-account-hub__secondary {
  display: none;
}

@media (max-width: 768px) {
  /* Both hub groups carry the same header shape, so they have to breathe the
     same way too. "Alışveriş ve Bakım" was a plain block with no row gap, which
     left its title sitting flush on the first tile while "Hesap ve Belgeler"
     below it had 9px of air. */
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-hub__primary,
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-hub__secondary {
    display: grid;
    gap: 9px;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-hub__secondary {
    margin-top: 8px;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-hub__secondary-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 3px 0;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-hub__secondary-head span {
    font: 750 10px/1 var(--cs-account-font, "Plus Jakarta Sans", sans-serif);
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #8d663c;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-hub__secondary-head small {
    font: 550 9.5px/1.25 var(--cs-account-font, "Plus Jakarta Sans", sans-serif);
    color: #8b7e71;
    text-align: right;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-hub__secondary-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-hub__secondary-list .cs-account-hub__item {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    min-height: 58px !important;
    padding: 9px 10px !important;
    border-radius: 15px !important;
    background: rgba(255, 253, 249, .7) !important;
    box-shadow: 0 7px 18px rgba(46, 34, 22, .035) !important;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-hub__secondary-list .cs-account-hub__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-hub__secondary-list .cs-account-hub__icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-hub__secondary-list .cs-account-hub__icon svg {
    width: 16px !important;
    height: 16px !important;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-hub__secondary-list .cs-account-hub__label {
    font-size: 11.5px !important;
  }

  /* Mobile account overview is a control centre, not a second storefront.
     Counts already live on the hub badges; Club/profile data already lives
     in the identity card; secondary destinations now live above. Keep the
     latest order as the single operational module and remove repeats. */
  body.account-page.cs-route-account.cs-mobile-v1-active #overviewPanel .cs-stat-grid--pulse,
  body.account-page.cs-route-account.cs-mobile-v1-active #overviewPanel .cs-overview-hero-grid,
  body.account-page.cs-route-account.cs-mobile-v1-active #overviewPanel .cs-journey,
  body.account-page.cs-route-account.cs-mobile-v1-active #overviewPanel .cs-buy-again,
  body.account-page.cs-route-account.cs-mobile-v1-active #overviewPanel .cs-recs-rail,
  body.account-page.cs-route-account.cs-mobile-v1-active #overviewPanel .cs-account-pulse,
  body.account-page.cs-route-account.cs-mobile-v1-active #overviewPanel .cs-overview-more {
    display: none !important;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active #overviewPanel .cs-overview-modules {
    display: block !important;
    min-height: 0 !important;
    margin-top: 2px !important;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active #overviewPanel .cs-overview-module--order {
    margin: 0 !important;
  }
}
body.account-page .cs-order-card--v6 .cs-order-card__pill {
  background: #f3eadf;
  color: #6c5135;
}
body.account-page .cs-order-card--v6 .cs-order-card__pill--success {
  background: rgba(61, 122, 84, .12);
  color: #2f5f42;
}
body.account-page .cs-order-card--v6 .cs-order-card__pill--shipped {
  background: #edf2f8;
  color: #295f91;
}
body.account-page .cs-order-card--v6 .cs-order-card__pill--alert {
  background: #fff0ed;
  color: #9b3328;
}
body.account-page .cs-order-card--v6 .cs-order-card__pill--pending {
  background: #f4eadc;
  color: #765331;
}
body.account-page .cs-order-card__meta-status--alert b {
  color: #a3392c !important;
}
body.account-page .cs-order-card__meta-status--success b {
  color: #2f6f3b !important;
}
body.account-page .cs-logout {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .18s ease !important;
}
body.account-page .cs-logout svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}
body.account-page .cs-logout:active {
  transform: scale(.985);
}
body.account-page .cs-logout:focus-visible {
  outline: 2px solid rgba(121, 47, 42, .36);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-sidebar {
    display: contents !important;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-profile-card {
    order: 1 !important;
    width: 100% !important;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-hub {
    order: 2 !important;
    display: grid !important;
    width: 100% !important;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-nav {
    display: none !important;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-content {
    order: 3 !important;
    width: 100% !important;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-help-card {
    order: 4 !important;
    width: 100% !important;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-logout {
    order: 5 !important;
    width: 100% !important;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-profile-card__head {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    gap: 13px !important;
    padding: 15px 16px 13px !important;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-profile-avatar {
    width: 54px !important;
    height: 54px !important;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-profile-avatar__text {
    font-size: 21px !important;
    font-weight: 680 !important;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-profile-card--v5 .cs-profile-hello {
    font-family: var(--cs-account-font) !important;
    font-size: 21px !important;
    font-weight: 680 !important;
    letter-spacing: -.025em !important;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-profile-card__meta {
    padding: 11px 16px 13px !important;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-profile-card__progress,
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-profile-meter {
    gap: 7px !important;
    padding: 1px 16px 15px !important;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-hub {
    gap: 10px !important;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-hub__head {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 0 2px !important;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-hub__sub {
    display: block !important;
    font-size: 11px !important;
    text-align: right !important;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-hub__list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-hub__item {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
    min-height: 66px !important;
    padding: 10px 11px !important;
    border: 1px solid rgba(42, 32, 22, .08) !important;
    border-radius: 17px !important;
    background: linear-gradient(160deg, #fffefb, #faf3e9) !important;
    box-shadow: 0 8px 22px rgba(46, 34, 22, .055) !important;
    color: #1a1510 !important;
    text-align: left !important;
    text-decoration: none !important;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-hub__item:last-child {
    border: 1px solid rgba(42, 32, 22, .08) !important;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-hub__icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(160deg, #fffefb, #efe3d2) !important;
    border: 1px solid rgba(42, 32, 22, .1) !important;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-hub__icon .cs-hub-svg,
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-hub__icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-hub__copy {
    display: grid !important;
    min-width: 0 !important;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-hub__label {
    display: block !important;
    font-size: 12.5px !important;
    line-height: 1.2 !important;
    color: #1a1510 !important;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-hub__hint,
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-hub__chev {
    display: none !important;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-hub__badge {
    position: absolute !important;
    top: 7px !important;
    right: 7px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #1a1510 !important;
    color: #fffaf3 !important;
    font-size: 9px !important;
    font-style: normal !important;
  }
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-hub__badge[hidden] {
    display: none !important;
  }
}

@media (min-width: 600px) and (max-width: 768px) {
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-account-hub__list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 721px) and (max-width: 768px) {
  body.account-page.cs-route-account.cs-mobile-v1-active .cs-mobile-v1-bottom-nav {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.account-page .cs-panel--enter,
  body.account-page .cs-logout {
    animation: none !important;
    transition: none !important;
  }
}