/**
 * Claue V2 — Customer account page styles
 * Sidebar navigation, order history table, address book cards, wishlist grid
 * Dark sidebar with white content area
 */

/* ── Account Layout ── */
.cl-account-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--cl-space-2xl);
  min-height: 60vh;
}

/* ── Account Sidebar ── */
.cl-account-sidebar {
  background: var(--cl-bg-dark);
  color: var(--cl-bg);
  padding: var(--cl-space-xl) 0;
}

.cl-account-sidebar__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--cl-bg);
  text-transform: uppercase;
  padding: 0 var(--cl-space-lg);
  margin-bottom: var(--cl-space-lg);
}

.cl-account-nav__item {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cl-account-nav__item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cl-account-nav__link {
  display: flex;
  align-items: center;
  gap: var(--cl-space-sm);
  padding: var(--cl-space-md) var(--cl-space-lg);
  font-size: 13px;
  color: var(--cl-text-light);
  font-weight: 500;
  transition: all var(--cl-transition);
}

.cl-account-nav__link:hover,
.cl-account-nav__link--active {
  color: var(--cl-bg);
  background: rgba(255, 255, 255, 0.05);
  padding-left: calc(var(--cl-space-lg) + 4px);
}

.cl-account-nav__link--active {
  border-left: 3px solid var(--cl-primary);
  padding-left: calc(var(--cl-space-lg) + 1px);
}

.cl-account-nav__icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

/* ── Account Content ── */
.cl-account-content {
  padding-top: var(--cl-space-lg);
}

.cl-account-content__title {
  font-size: 22px;
  font-weight: 600;
  color: var(--cl-heading);
  margin-bottom: var(--cl-space-lg);
  padding-bottom: var(--cl-space-md);
  border-bottom: 1px solid var(--cl-border-light);
}

/* ── Order History Table ── */
.cl-orders-table {
  width: 100%;
  border-collapse: collapse;
}

.cl-orders-table thead th {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--cl-text-dark);
  padding: var(--cl-space-md) var(--cl-space-sm);
  border-bottom: 2px solid var(--cl-border);
  text-align: left;
  white-space: nowrap;
}

.cl-orders-table thead th:last-child {
  text-align: center;
}

.cl-orders-table tbody td {
  font-size: 13px;
  color: var(--cl-text);
  padding: var(--cl-space-md) var(--cl-space-sm);
  border-bottom: 1px solid var(--cl-border-light);
  vertical-align: middle;
}

.cl-orders-table tbody td:last-child {
  text-align: center;
}

.cl-orders-table tbody tr:hover {
  background: var(--cl-bg-light);
}

.cl-order-status {
  display: inline-block;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.cl-order-status--pending {
  background: var(--cl-warning);
  color: var(--cl-bg-dark);
}

.cl-order-status--processing {
  background: var(--cl-info);
  color: var(--cl-bg);
}

.cl-order-status--complete,
.cl-order-status--delivered {
  background: var(--cl-success);
  color: var(--cl-bg);
}

.cl-order-status--canceled,
.cl-order-status--closed {
  background: var(--cl-danger);
  color: var(--cl-bg);
}

.cl-orders-table .cl-btn--sm {
  padding: 4px 12px;
  font-size: 11px;
}

/* ── Address Book ── */
.cl-address-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--cl-space-lg);
}

.cl-address-card {
  border: 1px solid var(--cl-border);
  padding: var(--cl-space-lg);
  transition: border-color var(--cl-transition);
}

.cl-address-card:hover {
  border-color: var(--cl-primary);
}

.cl-address-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--cl-heading);
  margin-bottom: var(--cl-space-sm);
}

.cl-address-card__content {
  font-size: 13px;
  color: var(--cl-text);
  line-height: 1.7;
  margin-bottom: var(--cl-space-md);
}

.cl-address-card__actions {
  display: flex;
  gap: var(--cl-space-md);
  font-size: 12px;
}

.cl-address-card__actions a {
  color: var(--cl-primary);
  font-weight: 500;
}

.cl-address-card__actions a:hover {
  text-decoration: underline;
}

/* ── Account Info Card (Dashboard) ── */
.cl-account-info-card {
  border: 1px solid var(--cl-border);
  padding: var(--cl-space-xl);
  margin-bottom: var(--cl-space-xl);
}

.cl-account-info-card__body {
  display: flex;
  gap: var(--cl-space-xl);
}

.cl-account-info-card__welcome {
  flex: 1;
}

.cl-account-info-card__greeting {
  font-size: 16px;
  font-weight: 600;
  color: var(--cl-heading);
  margin-bottom: var(--cl-space-sm);
}

.cl-account-info-card__text {
  font-size: 13px;
  color: var(--cl-text);
  line-height: 1.7;
}

.cl-account-info-card__links {
  display: flex;
  flex-direction: column;
  gap: var(--cl-space-sm);
  min-width: 200px;
}

.cl-account-quick-link {
  display: flex;
  align-items: center;
  gap: var(--cl-space-sm);
  padding: var(--cl-space-sm) var(--cl-space-md);
  border: 1px solid var(--cl-border);
  font-size: 13px;
  font-weight: 500;
  color: var(--cl-text-dark);
  transition: all var(--cl-transition);
}

.cl-account-quick-link:hover {
  border-color: var(--cl-primary);
  color: var(--cl-primary);
}

.cl-account-quick-link__icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

/* ═══════════════════════════════════════════
   Auth Card (Login / Register / Forgot Password)
   ═══════════════════════════════════════════ */

.cl-auth-card-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--cl-space-3xl) 0;
  min-height: 60vh;
}

.cl-auth-card {
  width: 100%;
  max-width: 480px;
  background: var(--cl-bg);
  border: 1px solid var(--cl-border);
  padding: var(--cl-space-2xl);
}

.cl-auth-card__header {
  text-align: center;
  margin-bottom: var(--cl-space-xl);
}

.cl-auth-card__title {
  font-size: 22px;
  font-weight: 600;
  color: var(--cl-heading);
  text-transform: uppercase;
  margin-bottom: var(--cl-space-sm);
}

.cl-auth-card__subtitle {
  font-size: 13px;
  color: var(--cl-text-light);
  line-height: 1.6;
}

/* ── Auth Form ── */
.cl-auth-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cl-space-md);
}

.cl-auth-form__field {
  margin-bottom: var(--cl-space-md);
}

.cl-auth-form__label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--cl-text-dark);
  margin-bottom: var(--cl-space-xs);
}

.cl-auth-form__label--required::after {
  content: " *";
  color: var(--cl-danger);
}

.cl-auth-form__input {
  width: 100%;
  height: 44px;
  padding: 0 var(--cl-space-md);
  border: 1px solid var(--cl-border);
  font-size: 13px;
  font-family: var(--cl-font);
  color: var(--cl-text-dark);
  background: var(--cl-bg);
  outline: none;
  transition: border-color var(--cl-transition);
}

.cl-auth-form__input:focus {
  border-color: var(--cl-primary);
}

.cl-auth-form__input::placeholder {
  color: var(--cl-text-light);
}

.cl-auth-form__actions {
  margin-top: var(--cl-space-lg);
}

.cl-auth-form__links {
  text-align: center;
  margin-top: var(--cl-space-lg);
  padding-top: var(--cl-space-lg);
  border-top: 1px solid var(--cl-border-light);
  display: flex;
  justify-content: center;
  gap: var(--cl-space-lg);
}

.cl-auth-form__link {
  font-size: 13px;
  font-weight: 500;
  color: var(--cl-text);
  transition: color var(--cl-transition);
}

.cl-auth-form__link:hover {
  color: var(--cl-primary);
}

.cl-auth-form__link--accent {
  color: var(--cl-primary);
  font-weight: 600;
}

.cl-auth-form__link--accent:hover {
  color: var(--cl-primary-light);
}

.cl-auth-form__checkbox {
  display: flex;
  align-items: center;
  gap: var(--cl-space-sm);
  margin-bottom: var(--cl-space-md);
}

.cl-auth-form__checkbox-input {
  accent-color: var(--cl-primary);
}

.cl-auth-form__checkbox-label {
  font-size: 13px;
  color: var(--cl-text);
}

/* ── Auth Messages ── */
.cl-auth-card .messages {
  margin-bottom: var(--cl-space-lg);
}

/* ── Empty State ── */
.cl-empty {
  text-align: center;
  padding: var(--cl-space-3xl) var(--cl-space-lg);
}

.cl-empty__text {
  font-size: 14px;
  color: var(--cl-text-light);
  margin-bottom: var(--cl-space-lg);
}

/* ── Order Detail Header ── */
.cl-order-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cl-space-md);
  margin-bottom: var(--cl-space-xl);
  padding-bottom: var(--cl-space-md);
  border-bottom: 1px solid var(--cl-border-light);
}

.cl-order-detail-header__meta {
  display: flex;
  align-items: center;
  gap: var(--cl-space-md);
}

.cl-order-detail-header__date {
  font-size: 13px;
  color: var(--cl-text);
}

.cl-order-detail-header__actions a {
  font-size: 12px;
  font-weight: 500;
  color: var(--cl-primary);
}

.cl-order-detail-header__actions a:hover {
  text-decoration: underline;
}

/* ── Order Detail Layout ── */
.cl-order-detail-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--cl-space-2xl);
}

.cl-order-detail-main {
  min-width: 0;
}

.cl-order-detail-section__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--cl-heading);
  text-transform: uppercase;
  margin-bottom: var(--cl-space-md);
  padding-bottom: var(--cl-space-sm);
  border-bottom: 1px solid var(--cl-border-light);
}

/* ── Order Items Table ── */
.cl-order-items {
  margin-bottom: var(--cl-space-xl);
}

.cl-order-items-table {
  width: 100%;
  border-collapse: collapse;
}

.cl-order-items-table thead th {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--cl-text-dark);
  padding: var(--cl-space-md) var(--cl-space-sm);
  border-bottom: 2px solid var(--cl-border);
  text-align: left;
  white-space: nowrap;
}

.cl-order-items-table thead th:last-child {
  text-align: right;
}

.cl-order-items-table tbody td {
  font-size: 13px;
  color: var(--cl-text);
  padding: var(--cl-space-md) var(--cl-space-sm);
  border-bottom: 1px solid var(--cl-border-light);
  vertical-align: middle;
}

.cl-order-items-table tbody td:last-child {
  text-align: right;
}

.cl-order-items-table__row:hover {
  background: var(--cl-bg-light);
}

.cl-order-items-table__image img {
  display: block;
  border: 1px solid var(--cl-border-light);
}

.cl-order-items-table__name {
  min-width: 180px;
}

.cl-order-items-table__product-name {
  font-weight: 500;
  color: var(--cl-heading);
}

.cl-order-items-table__options {
  margin: var(--cl-space-xs) 0 0;
  font-size: 12px;
  color: var(--cl-text-light);
}

.cl-order-items-table__options dt {
  float: left;
  clear: left;
  font-weight: 500;
  color: var(--cl-text-dark);
}

.cl-order-items-table__options dt::after {
  content: ": ";
}

.cl-order-items-table__options dd {
  margin: 0 0 0 var(--cl-space-xs);
}

/* ── Order Addresses ── */
.cl-order-addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cl-space-lg);
  margin-bottom: var(--cl-space-xl);
}

.cl-order-address-card {
  border: 1px solid var(--cl-border);
  padding: var(--cl-space-lg);
}

.cl-order-address-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--cl-heading);
  text-transform: uppercase;
  margin-bottom: var(--cl-space-sm);
  padding-bottom: var(--cl-space-sm);
  border-bottom: 1px solid var(--cl-border-light);
}

.cl-order-address-card__content {
  font-size: 13px;
  color: var(--cl-text);
  line-height: 1.7;
}

.cl-order-address-card__content address {
  font-style: normal;
}

/* ── Order Totals Sidebar ── */
.cl-order-totals-sidebar {
  position: sticky;
  top: calc(var(--cl-header-height, 120px) + 20px);
}

.cl-order-summary-box {
  border: 1px solid var(--cl-border);
  padding: var(--cl-space-lg);
  background: var(--cl-bg);
}

.cl-order-summary-box__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--cl-heading);
  text-transform: uppercase;
  margin-bottom: var(--cl-space-lg);
  padding-bottom: var(--cl-space-md);
  border-bottom: 1px solid var(--cl-border-light);
}

.cl-order-summary-box__rows {
  margin-bottom: var(--cl-space-md);
}

.cl-order-summary-box__row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--cl-text);
  padding: var(--cl-space-xs) 0;
}

.cl-order-summary-box__row--total {
  font-size: 16px;
  font-weight: 700;
  color: var(--cl-heading);
  border-top: 1px solid var(--cl-border);
  padding-top: var(--cl-space-md);
  margin-top: var(--cl-space-sm);
}

.cl-order-summary-box__grand-total {
  color: var(--cl-primary);
}

/* ── Order Detail Back Link ── */
.cl-order-detail-back {
  margin-top: var(--cl-space-xl);
  padding-top: var(--cl-space-lg);
  border-top: 1px solid var(--cl-border-light);
}

/* ── Address Header ── */
.cl-address-header {
  margin-bottom: var(--cl-space-lg);
  display: flex;
  justify-content: flex-end;
}

.cl-btn__icon {
  font-weight: 700;
  margin-right: var(--cl-space-xs);
}

/* ── Address Card Additional ── */
.cl-address-card__edit,
.cl-address-card__delete {
  font-size: 12px;
  font-weight: 500;
  color: var(--cl-primary);
  transition: opacity var(--cl-transition);
}

.cl-address-card__delete {
  color: var(--cl-danger);
}

.cl-address-card__edit:hover,
.cl-address-card__delete:hover {
  text-decoration: underline;
}

/* ── Wishlist Actions ── */
.cl-wishlist-actions {
  display: flex;
  gap: var(--cl-space-md);
  margin-bottom: var(--cl-space-xl);
  padding-bottom: var(--cl-space-lg);
  border-bottom: 1px solid var(--cl-border-light);
}

.cl-products--wishlist {
  margin-top: var(--cl-space-lg);
}

/* ── Product Card Actions (Wishlist) ── */
.cl-product-card__actions {
  display: flex;
  align-items: center;
  gap: var(--cl-space-sm);
  margin-top: var(--cl-space-sm);
}

.cl-product-card__remove {
  font-size: 12px;
  color: var(--cl-text-light);
  font-weight: 500;
  transition: color var(--cl-transition);
}

.cl-product-card__remove:hover {
  color: var(--cl-danger);
}

.cl-product-card__outofstock {
  font-size: 12px;
  color: var(--cl-danger);
  font-weight: 500;
}

/* ── Edit Account Form ── */
.cl-form-edit {
  max-width: 680px;
}

.cl-form-edit__section {
  margin-bottom: var(--cl-space-xl);
  border: none;
  padding: 0;
}

.cl-form-edit__section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--cl-heading);
  text-transform: uppercase;
  margin-bottom: var(--cl-space-md);
  padding-bottom: var(--cl-space-sm);
  border-bottom: 1px solid var(--cl-border-light);
  width: 100%;
}

.cl-form-edit__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cl-space-md);
}

.cl-form-edit__field {
  margin-bottom: var(--cl-space-md);
}

.cl-form-edit__label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--cl-text-dark);
  margin-bottom: var(--cl-space-xs);
}

.cl-form-edit__label--required::after {
  content: " *";
  color: var(--cl-danger);
}

.cl-form-edit__input {
  width: 100%;
  height: 44px;
  padding: 0 var(--cl-space-md);
  border: 1px solid var(--cl-border);
  font-size: 13px;
  font-family: var(--cl-font);
  color: var(--cl-text-dark);
  background: var(--cl-bg);
  outline: none;
  transition: border-color var(--cl-transition);
}

.cl-form-edit__input:focus {
  border-color: var(--cl-primary);
}

.cl-form-edit__input[readonly] {
  background: var(--cl-bg-light);
  color: var(--cl-text-light);
  cursor: not-allowed;
}

.cl-form-edit__checkbox {
  display: flex;
  align-items: center;
  gap: var(--cl-space-sm);
  margin-bottom: var(--cl-space-md);
}

.cl-form-edit__checkbox-input {
  accent-color: var(--cl-primary);
}

.cl-form-edit__checkbox-label {
  font-size: 13px;
  color: var(--cl-text);
  font-weight: 500;
}

.cl-form-edit__password-section {
  padding: var(--cl-space-lg);
  border: 1px solid var(--cl-border);
  margin-top: var(--cl-space-md);
  background: var(--cl-bg-light);
}

.cl-form-edit__actions {
  display: flex;
  gap: var(--cl-space-md);
  padding-top: var(--cl-space-lg);
  border-top: 1px solid var(--cl-border-light);
}

/* ═══════════════════════════════════════════════════════════
   P27 — Edit Account Information (/customer/account/edit/)
   Cards the edit form to match the P26 dashboard chrome (bordered
   white box on var(--cl-bg)). Scoped to .customer-account-edit so
   no other page is affected. The dark uppercase SAVE button is
   rgb(34,37,41) = var(--cl-bg-dark) with 0 radius, consistent with
   the account-area action style.
   ═══════════════════════════════════════════════════════════ */
.customer-account-edit .cl-form-edit {
  border: 1px solid var(--cl-border);
  background: var(--cl-bg);
  padding: var(--cl-space-xl);
}

/* Square the account-edit action buttons (rgb(34,37,41) dark SAVE). */
.customer-account-edit .cl-form-edit__actions .cl-btn {
  border-radius: 0;
}

@media (max-width: 768px) {
  .customer-account-edit .cl-form-edit {
    padding: var(--cl-space-lg);
  }

  /* Stack the two-up name row on small viewports. */
  .customer-account-edit .cl-form-edit__row {
    grid-template-columns: 1fr;
  }

  .customer-account-edit .cl-form-edit__actions {
    flex-wrap: wrap;
  }
}

/* ── Newsletter Form ── */
.cl-newsletter-form {
  max-width: 560px;
}

.cl-newsletter-form__section {
  border: 1px solid var(--cl-border);
  padding: var(--cl-space-xl);
  margin-bottom: var(--cl-space-xl);
}

.cl-newsletter-form__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--cl-heading);
  text-transform: uppercase;
  margin-bottom: var(--cl-space-md);
}

.cl-newsletter-form__checkbox {
  display: flex;
  align-items: center;
  gap: var(--cl-space-sm);
  margin-bottom: var(--cl-space-sm);
}

.cl-newsletter-form__checkbox-input {
  accent-color: var(--cl-primary);
}

.cl-newsletter-form__checkbox-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--cl-text-dark);
}

.cl-newsletter-form__description {
  font-size: 13px;
  color: var(--cl-text-light);
  line-height: 1.6;
  margin-top: var(--cl-space-sm);
  margin-left: calc(var(--cl-space-sm) + 13px + var(--cl-space-sm));
}

.cl-newsletter-form__actions {
  padding-top: var(--cl-space-lg);
}

/* ── Downloads Table ── */
.cl-downloads-wrap {
  margin-bottom: var(--cl-space-xl);
}

.cl-downloads-table {
  width: 100%;
  border-collapse: collapse;
}

.cl-downloads-table thead th {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--cl-text-dark);
  padding: var(--cl-space-md) var(--cl-space-sm);
  border-bottom: 2px solid var(--cl-border);
  text-align: left;
  white-space: nowrap;
}

.cl-downloads-table tbody td {
  font-size: 13px;
  color: var(--cl-text);
  padding: var(--cl-space-md) var(--cl-space-sm);
  border-bottom: 1px solid var(--cl-border-light);
  vertical-align: middle;
}

.cl-downloads-table tbody tr:hover {
  background: var(--cl-bg-light);
}

.cl-downloads-table__order a {
  color: var(--cl-primary);
  font-weight: 500;
}

.cl-downloads-table__order a:hover {
  text-decoration: underline;
}

.cl-download-status {
  display: inline-block;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.cl-download-status--available {
  background: var(--cl-success);
  color: var(--cl-bg);
}

.cl-download-status--pending {
  background: var(--cl-warning);
  color: var(--cl-bg-dark);
}

.cl-download-status--expired {
  background: var(--cl-danger);
  color: var(--cl-bg);
}

.cl-downloads-table__na {
  color: var(--cl-text-light);
  font-style: italic;
}

/* ── Review List ── */
.cl-review-list {
  display: flex;
  flex-direction: column;
  gap: var(--cl-space-lg);
}

.cl-review-card {
  display: flex;
  gap: var(--cl-space-lg);
  padding: var(--cl-space-lg);
  border: 1px solid var(--cl-border);
  transition: border-color var(--cl-transition);
}

.cl-review-card:hover {
  border-color: var(--cl-primary);
}

.cl-review-card__image {
  flex-shrink: 0;
}

.cl-review-card__image img {
  display: block;
  border: 1px solid var(--cl-border-light);
}

.cl-review-card__info {
  flex: 1;
  min-width: 0;
}

.cl-review-card__product {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: var(--cl-space-sm);
}

.cl-review-card__product a {
  color: var(--cl-heading);
  transition: color var(--cl-transition);
}

.cl-review-card__product a:hover {
  color: var(--cl-primary);
}

.cl-review-card__rating {
  margin-bottom: var(--cl-space-sm);
}

.cl-stars {
  display: inline-flex;
  gap: 2px;
}

.cl-stars__star {
  font-size: 14px;
  line-height: 1;
}

.cl-stars__star--filled {
  color: var(--cl-warning);
}

.cl-stars__star--empty {
  color: var(--cl-border);
}

.cl-review-card__text {
  font-size: 13px;
  color: var(--cl-text);
  line-height: 1.6;
  margin-bottom: var(--cl-space-sm);
}

.cl-review-card__meta {
  display: flex;
  align-items: center;
  gap: var(--cl-space-md);
  font-size: 12px;
  color: var(--cl-text-light);
}

.cl-review-card__link {
  font-weight: 500;
  color: var(--cl-primary);
  transition: color var(--cl-transition);
}

.cl-review-card__link:hover {
  text-decoration: underline;
}

/* ── Table Action Buttons ── */
.cl-btn--sm {
  display: inline-block;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border: none;
  cursor: pointer;
  transition: background var(--cl-transition);
}

.cl-btn--dark {
  background: var(--cl-primary);
  color: var(--cl-bg);
}

.cl-btn--dark:hover {
  background: var(--cl-primary-light);
}

.cl-btn--primary {
  background: var(--cl-primary);
  color: var(--cl-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
  cursor: pointer;
  transition: background var(--cl-transition);
}

.cl-btn--primary:hover {
  background: var(--cl-primary-light);
}

.cl-btn--full {
  width: 100%;
}

/* ── Orders Pager / Downloads Pager / Review Pager ── */
.cl-orders-pager,
.cl-downloads-pager,
.cl-review-pager {
  margin-top: var(--cl-space-lg);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .cl-account-layout {
    grid-template-columns: 1fr;
  }

  .cl-account-sidebar {
    display: none;
  }

  .cl-account-info-card__body {
    flex-direction: column;
  }

  .cl-account-info-card__links {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .cl-account-quick-link {
    flex: 1;
    min-width: 140px;
  }

  .cl-auth-card {
    max-width: 100%;
    padding: var(--cl-space-xl);
  }

  .cl-auth-form__row {
    grid-template-columns: 1fr;
  }

  .cl-auth-form__links {
    flex-direction: column;
    gap: var(--cl-space-sm);
  }

  .cl-order-detail-layout {
    grid-template-columns: 1fr;
  }

  .cl-order-totals-sidebar {
    position: static;
    order: -1;
  }

  .cl-order-addresses {
    grid-template-columns: 1fr;
  }

  .cl-form-edit__row {
    grid-template-columns: 1fr;
  }

  .cl-review-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .cl-wishlist-actions {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .cl-address-grid {
    grid-template-columns: 1fr;
  }

  .cl-auth-card-wrapper {
    padding: var(--cl-space-xl) 0;
  }

  .cl-auth-card {
    padding: var(--cl-space-lg);
  }

  .cl-orders-table,
  .cl-order-items-table,
  .cl-downloads-table {
    font-size: 12px;
  }

  .cl-newsletter-form__section {
    padding: var(--cl-space-md);
  }
}
.cl-auth-card{max-width:440px;margin:40px auto;padding:30px}
.cl-auth-form__input{width:100%;height:46px;border:1px solid var(--cl-border);padding:0 15px;font-size:13px;margin-bottom:15px}
.cl-auth-form__input:focus{border-color:var(--cl-primary)}
.cl-btn--full{width:100%}
.cl-auth-form__hint{margin-top:8px;font-size:12px;color:var(--cl-text-light)}
.cl-auth-form__field--choice{margin-bottom:var(--cl-space-md)}
.cl-auth-form__field--choice .field.choice{margin:0}
.cl-account-layout{display:grid;grid-template-columns:240px 1fr;gap:30px}
.cl-account-sidebar{background:var(--cl-bg-dark);color:#999;padding:20px}
.cl-account-sidebar a{color:#999;font-size:13px;display:block;padding:8px 0}
.cl-account-sidebar a:hover{color:#fff}
.cl-order-table{width:100%;border-collapse:collapse}
.cl-order-table th{font-size:13px;font-weight:600;text-transform:uppercase;padding:12px 10px;border-bottom:1px solid var(--cl-border);text-align:left}
.cl-order-table td{font-size:13px;padding:12px 10px;border-bottom:1px solid var(--cl-border-light)}
.cl-wishlist-item{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid var(--cl-border-light);align-items:center}
.cl-address-card{border:1px solid var(--cl-border);padding:20px;margin-bottom:16px}
.cl-address-card__name{font-size:15px;font-weight:600;margin-bottom:8px}
.cl-order-status{display:inline-block;padding:4px 12px;font-size:11px;font-weight:600;text-transform:uppercase;border-radius:2px}
.cl-order-status--processing{background:#e8f5e9;color:#2e7d32}
.cl-order-status--complete{background:#e3f2fd;color:#1565c0}
.cl-review-card{padding:20px 0;border-bottom:1px solid var(--cl-border-light)}
.cl-review-card__product{font-size:14px;font-weight:600;margin-bottom:6px}
.cl-review-card__text{font-size:13px;color:var(--cl-text-light);line-height:1.6}
.cl-downloads-table{width:100%;border-collapse:collapse}
.cl-downloads-table th{font-size:13px;font-weight:600;text-transform:uppercase;padding:12px;border-bottom:1px solid var(--cl-border);text-align:left}
.cl-downloads-table td{font-size:13px;padding:12px;border-bottom:1px solid var(--cl-border-light)}
.cl-newsletter-form{display:flex;gap:10px;max-width:500px}
.cl-newsletter-form input{flex:1;height:46px;border:1px solid var(--cl-border);padding:0 15px;font-size:13px}


/* ═══════════════════════════════════════════════════════════
   P26 — Customer Account Dashboard (/customer/account/)
   + P27 — shared account sidebar nav
   The dashboard renders default Magento markup (no template
   override): block-dashboard-info / block-dashboard-addresses /
   block-collapsible-nav. These rules card it to match the cl-
   design system.

   Two scopes are used deliberately:
     • The sidebar-nav rules are scoped to .cl-page-account (the shared
       account body class) because the Luma collapsible-nav markup is
       identical on every account page — dashboard, edit (P27), orders,
       address — so they all get the same dark sidebar nav.
     • The dashboard-content rules (block-dashboard-info / -addresses)
       stay scoped to .customer-account-index because that markup only
       exists on the dashboard.

   The two boxes in each dashboard section keep Luma's native float
   layout (48% side-by-side, contained by Luma's clearfix); we only add
   the card chrome. Do NOT switch .block-content to grid — Luma's
   clearfix ::before/::after become stray grid items and break the
   track placement.

   NOTE: these rules target Luma's DEFAULT markup (.block-collapsible-nav,
   .box). The .cl-account-nav__link / .cl-account-sidebar BEM rules near the
   top of this file are unused leftovers (the theme ships no account-nav
   template override) — do NOT merge the two; this dark-nav block is what
   actually styles the rendered Luma nav.
   ═══════════════════════════════════════════════════════════ */

/* ── Account sidebar nav (dark card) ──
   The Luma collapsible-nav markup is identical on every account page (the
   shared customer_account.xml moves it into .cl-account-nav on all of them),
   so the dark-nav rules are scoped to the shared .cl-page-account body class
   rather than .customer-account-index. This gives the dashboard (P26) AND the
   edit page (P27) — and every other account page — the same dark sidebar nav.
   The dashboard-content rules below stay .customer-account-index-scoped because
   they target dashboard-only markup (.block-dashboard-info / -addresses). */
.cl-page-account .cl-account-nav {
  background: var(--cl-bg-dark);
}

.cl-page-account .cl-account-nav .block-collapsible-nav .content {
  background: transparent;
  border: 0;
  padding: var(--cl-space-md) 0;
}

.cl-page-account .cl-account-nav .block-collapsible-nav .items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cl-page-account .cl-account-nav .block-collapsible-nav .item {
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cl-page-account .cl-account-nav .block-collapsible-nav .item:first-child {
  border-top: 0;
}

.cl-page-account .cl-account-nav .block-collapsible-nav .item a,
.cl-page-account .cl-account-nav .block-collapsible-nav .item > strong {
  display: block;
  padding: var(--cl-space-md) var(--cl-space-lg);
  font-size: 13px;
  font-weight: 500;
  color: var(--cl-text-light);
  line-height: 1.4;
  transition: color var(--cl-transition), background var(--cl-transition);
}

.cl-page-account .cl-account-nav .block-collapsible-nav .item a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

/* Active page — white left rule (--cl-primary is #000, invisible on dark). */
.cl-page-account .cl-account-nav .block-collapsible-nav .item.current a,
.cl-page-account .cl-account-nav .block-collapsible-nav .item.current > strong {
  color: #fff;
  font-weight: 600;
  border-left: 3px solid #fff;
  padding-left: calc(var(--cl-space-lg) - 3px);
  background: rgba(255, 255, 255, 0.04);
}

/* Mobile collapsible toggle title — readable on the dark card */
.cl-page-account .cl-account-nav .block-collapsible-nav .title {
  color: #fff;
}

/* The shared customer_account.xml moves the nav items OUT of the collapsible
   block's .content into .cl-account-nav, leaving .block-collapsible-nav > .title
   as a vestigial toggle over empty content. Desktop hides .title natively; on
   mobile it would render as a dead "My Account" toggle above the page — hide it,
   since the full nav is always shown in the dark .cl-account-nav card. */
.cl-page-account .block-collapsible-nav > .title {
  display: none;
}

/* ── Dashboard content sections (Account Information / Address Book) ── */
.customer-account-index .block-dashboard-info,
.customer-account-index .block-dashboard-addresses {
  margin-bottom: var(--cl-space-2xl);
}

.customer-account-index .block-dashboard-info .block-title,
.customer-account-index .block-dashboard-addresses .block-title {
  margin-bottom: var(--cl-space-lg);
  padding-bottom: var(--cl-space-sm);
  border-bottom: 1px solid var(--cl-border);
}

.customer-account-index .block-dashboard-info .block-title > strong,
.customer-account-index .block-dashboard-addresses .block-title > strong {
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--cl-heading);
  margin-right: var(--cl-space-md);
}

.customer-account-index .block-dashboard-addresses .block-title .action.edit {
  font-size: 12px;
  font-weight: 500;
  color: var(--cl-primary);
}

.customer-account-index .block-dashboard-addresses .block-title .action.edit:hover {
  text-decoration: underline;
}

/* Cards — keep Luma's native 48% float layout: Luma floats the two boxes in
   each .block-content side-by-side and contains them with its own clearfix; we
   only add the card chrome. Scoped to the two dashboard blocks EXPLICITLY (not
   a bare .block-content .box) so a future sidebar/promo widget that survives on
   this page is never restyled. width:48% mirrors Luma's float width — keep in
   sync if Luma changes. min-height puts the two side-by-side cards on a common
   visual floor (floats do not equalise heights). */
.customer-account-index .block-dashboard-info .block-content .box,
.customer-account-index .block-dashboard-addresses .block-content .box {
  box-sizing: border-box;
  width: 48%;
  margin-bottom: var(--cl-space-lg);
  border: 1px solid var(--cl-border);
  padding: var(--cl-space-lg);
  background: var(--cl-bg);
  min-height: 150px;
}

.customer-account-index .block-dashboard-info .block-content .box-title,
.customer-account-index .block-dashboard-info .block-content .box-title > span,
.customer-account-index .block-dashboard-addresses .block-content .box-title,
.customer-account-index .block-dashboard-addresses .block-content .box-title > span {
  display: block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--cl-heading);
  margin-bottom: var(--cl-space-sm);
}

.customer-account-index .block-dashboard-info .block-content .box-content,
.customer-account-index .block-dashboard-info .block-content .box-content address,
.customer-account-index .block-dashboard-addresses .block-content .box-content,
.customer-account-index .block-dashboard-addresses .block-content .box-content address {
  font-size: 13px;
  font-style: normal;
  line-height: 1.7;
  color: var(--cl-text);
}

.customer-account-index .block-dashboard-info .block-content .box-content a,
.customer-account-index .block-dashboard-addresses .block-content .box-content a {
  color: var(--cl-text-dark);
}

.customer-account-index .block-dashboard-info .block-content .box-content a:hover,
.customer-account-index .block-dashboard-addresses .block-content .box-content a:hover {
  color: var(--cl-primary);
  text-decoration: underline;
}

.customer-account-index .block-dashboard-info .block-content .box-actions,
.customer-account-index .block-dashboard-addresses .block-content .box-actions {
  margin-top: var(--cl-space-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--cl-space-md);
}

.customer-account-index .block-dashboard-info .block-content .box-actions .action,
.customer-account-index .block-dashboard-addresses .block-content .box-actions .action {
  font-size: 12px;
  font-weight: 500;
  color: var(--cl-primary);
}

.customer-account-index .block-dashboard-info .block-content .box-actions .action:hover,
.customer-account-index .block-dashboard-addresses .block-content .box-actions .action:hover {
  text-decoration: underline;
}

/* ── Dashboard responsive ── */
@media (max-width: 768px) {
  .customer-account-index .block-dashboard-info .block-content .box,
  .customer-account-index .block-dashboard-addresses .block-content .box {
    width: 100%;
    float: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   P29 — Add / Edit Customer Address (/customer/address/new|edit)
   Themes the core Magento address form (form.form-address-edit) in
   place — no template override, so region-switching JS, validation
   and the configurable street-line count are all preserved. The look
   mirrors the P27 account-edit card: bordered white box on var(--cl-bg),
   stacked 13px labels, 44px square-cornered inputs/selects, uppercase
   section legends, and a dark uppercase SAVE button (the dark fill /
   square corners come from the global button.action.primary !important
   rule in buttons-clean.css; here we only add the form-specific sizing
   + uppercase treatment). Every rule is scoped to .cl-page-address-form
   so checkout / order address forms and the rest of the account area
   are untouched.
   ═══════════════════════════════════════════════════════════ */

/* Page heading ("Add New Address" / "Edit Address Entry"). */
.cl-page-address-form .column.main .page-title-wrapper .page-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--cl-heading);
  margin-bottom: var(--cl-space-lg);
  padding-bottom: var(--cl-space-md);
  border-bottom: 1px solid var(--cl-border-light);
}

/* Card the form. width + box-sizing keep it inside the column on mobile. */
.cl-page-address-form .column.main .form-address-edit {
  max-width: 680px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--cl-border);
  background: var(--cl-bg);
  padding: var(--cl-space-xl);
}

/* Reset Luma fieldset chrome; space the two sections. */
.cl-page-address-form .column.main .form-address-edit .fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--cl-space-xl);
}
.cl-page-address-form .column.main .form-address-edit .fieldset:last-of-type {
  margin-bottom: var(--cl-space-md);
}

/* Section legends → uppercase heading with underline (override centered Luma). */
.cl-page-address-form .column.main .form-address-edit .fieldset > .legend {
  float: none;
  width: 100%;
  margin: 0 0 var(--cl-space-md);
  padding-bottom: var(--cl-space-sm);
  border-bottom: 1px solid var(--cl-border-light);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--cl-heading);
  text-align: left;
}
.cl-page-address-form .column.main .form-address-edit .fieldset > .legend + br {
  display: none;
}

/* Full-width stacked fields. float/width neutralise any base side-by-side
   float on the name fields (.field-name-firstname / -lastname). */
.cl-page-address-form .column.main .form-address-edit .fieldset > .field {
  float: none;
  width: 100%;
  margin: 0 0 var(--cl-space-md);
}
.cl-page-address-form .column.main .form-address-edit .fieldset > .field:not(.choice) > .label,
.cl-page-address-form .column.main .form-address-edit .fieldset .control .nested .field > .label {
  float: none;
  width: auto;
  padding: 0;
  margin: 0 0 var(--cl-space-xs);
  text-align: left;
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--cl-text-dark);
}
.cl-page-address-form .column.main .form-address-edit .fieldset > .field:not(.choice) > .control,
.cl-page-address-form .column.main .form-address-edit .fieldset .control .nested .field > .control {
  float: none;
  width: 100%;
}

/* Inputs + selects → 44px, square corners, claue borders. */
.cl-page-address-form .column.main .form-address-edit .fieldset .control input.input-text,
.cl-page-address-form .column.main .form-address-edit .fieldset .control input[type="text"],
.cl-page-address-form .column.main .form-address-edit .fieldset .control input[type="tel"],
.cl-page-address-form .column.main .form-address-edit .fieldset .control select {
  width: 100%;
  height: 44px;
  padding: 0 var(--cl-space-md);
  border: 1px solid var(--cl-border);
  border-radius: 0;
  font-size: 13px;
  font-family: var(--cl-font);
  color: var(--cl-text-dark);
  background: var(--cl-bg);
  outline: none;
  transition: border-color var(--cl-transition);
}
.cl-page-address-form .column.main .form-address-edit .fieldset .control input.input-text:focus,
.cl-page-address-form .column.main .form-address-edit .fieldset .control input[type="text"]:focus,
.cl-page-address-form .column.main .form-address-edit .fieldset .control input[type="tel"]:focus,
.cl-page-address-form .column.main .form-address-edit .fieldset .control select:focus {
  border-color: var(--cl-primary);
}
/* Nested street lines spacing. */
.cl-page-address-form .column.main .form-address-edit .fieldset .control .nested {
  margin-top: var(--cl-space-sm);
}

/* Default billing / shipping checkboxes. In the core template these are
   <div class="field default"> direct children of the form (NOT inside a
   fieldset, NOT .choice), so they are scoped off the form element. */
.cl-page-address-form .column.main .form-address-edit > .field.default {
  display: flex;
  align-items: center;
  gap: var(--cl-space-sm);
  float: none;
  width: 100%;
  margin: 0 0 var(--cl-space-md);
}
.cl-page-address-form .column.main .form-address-edit > .field.default > input[type="checkbox"] {
  accent-color: var(--cl-primary);
  margin: 0;
  flex-shrink: 0;
}
.cl-page-address-form .column.main .form-address-edit > .field.default > .label {
  float: none;
  width: auto;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--cl-text);
}

/* Actions toolbar — the dark fill / square corners come from the global
   button.action.primary rule; here we add sizing + uppercase. */
.cl-page-address-form .column.main .form-address-edit .actions-toolbar {
  margin: 0;
  padding-top: var(--cl-space-lg);
  border-top: 1px solid var(--cl-border-light);
  display: flex;
  align-items: center;
  gap: var(--cl-space-md);
}
.cl-page-address-form .column.main .form-address-edit .actions-toolbar .primary,
.cl-page-address-form .column.main .form-address-edit .actions-toolbar .secondary {
  margin: 0;
}
.cl-page-address-form .column.main .form-address-edit .actions-toolbar button.action.save {
  padding: 12px 28px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.cl-page-address-form .column.main .form-address-edit .actions-toolbar .action.back {
  font-size: 13px;
  color: var(--cl-text);
  text-decoration: underline;
  background: none;
  border: none;
}
.cl-page-address-form .column.main .form-address-edit .actions-toolbar .action.back:hover {
  color: var(--cl-primary);
}

@media (max-width: 768px) {
  .cl-page-address-form .column.main .form-address-edit {
    padding: var(--cl-space-lg);
  }
  .cl-page-address-form .column.main .form-address-edit .actions-toolbar {
    flex-wrap: wrap;
  }
}