/**
 * My Account Pages Styles
 * All styles for My Account section (Dashboard, Orders, Addresses, etc.)
 *
 * @package Bonevents
 */

/* ============================================
   HIDE LEGACY WOOCOMMERCE ELEMENTS
   ============================================ */

/* Hide default WooCommerce My Account sidebar navigation */
.woocommerce-MyAccount-navigation {
  display: none !important;
}

/* ============================================
   HIDE WORDPRESS PAGE WRAPPER FOR MY ACCOUNT
   ============================================ */

/* Hide default WordPress page header and container on My Account pages */
.woocommerce-account .page-header {
  display: none !important;
}

.woocommerce-account .page .container {
  max-width: none !important;
  padding: 0 !important;
}

.woocommerce-account .page-content {
  padding: 0 !important;
}

/* ============================================
   MY ACCOUNT PAGE CONTAINER
   ============================================ */

.myaccount-page {
  padding: var(--space-3xl) 0;
  background: var(--color-bg-primary);
}

.myaccount-page__container {
  /* Full width with fixed padding per Figma design */
  padding: 0 48px;
  margin: 0 auto;
}

/* ============================================
   NAVIGATION - DESKTOP
   ============================================ */

.myaccount-navigation {
  margin-bottom: 0;
  padding: 0 48px; /* Full width with side padding */
  border-bottom: 1px solid rgba(44, 44, 52, 0.15); /* Line under navigation */
}

.myaccount-navigation__mobile-toggle {
  display: none; /* Hidden on desktop */
}

.myaccount-navigation__menu {
  display: flex;
  gap: 32px; /* Per Figma design */
  list-style: none;
  padding: 0;
  margin: 0 auto;
  justify-content: center; /* Center navigation items */
  max-width: fit-content; /* Force center alignment */
}

.myaccount-navigation__item {
  margin: 0;
}

.myaccount-navigation__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 16px; /* height 36px per Figma */
  color: var(--color-text-primary); /* #2C2C34 */
  text-decoration: none;
  font-family: var(--font-primary);
  font-size: 14px; /* Per Figma */
  font-weight: 300; /* Light */
  line-height: 2;
  transition: var(--transition-base);
}

.myaccount-navigation__link i {
  font-size: 14px;
}

.myaccount-navigation__link:hover {
  opacity: 0.7;
}

/* Active state per Figma - black background, white text */
.myaccount-navigation__item.is-active .myaccount-navigation__link {
  background: #2C2C34;
  color: #FCFDFF;
}

/* ============================================
   PAGE TITLE (H3 style from Figma)
   ============================================ */

.myaccount-page__title {
  font-family: var(--font-primary); /* Outfit */
  font-size: 24px;
  font-weight: 400; /* Regular */
  line-height: 1.27;
  color: #2C2C34;
  margin: 0 0 32px 0; /* 32px gap before content per Figma */
  padding-top: 32px; /* Space after navigation line */
}

/* ============================================
   DASHBOARD PAGE
   ============================================ */

.myaccount-dashboard {
  max-width: 664px; /* Per Figma design */
  margin: 0 auto; /* Center the dashboard */
  padding-top: 48px; /* Space after navigation */
}

.myaccount-dashboard__welcome {
  margin-bottom: 48px; /* Increased spacing per Figma */
}

.myaccount-dashboard__greeting {
  font-size: 16px; /* Per Figma */
  font-weight: 300; /* Light weight */
  color: rgba(44, 44, 52, 0.5); /* Light gray per Figma */
  margin-bottom: 8px; /* Minimal spacing */
}

.myaccount-dashboard__username {
  font-size: 28px; /* Large username per Figma */
  font-weight: 600; /* Semibold per Figma */
  font-family: var(--font-primary);
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.4;
}

.myaccount-dashboard__logout {
  font-size: 16px; /* Per Figma */
  font-weight: 300; /* Light weight */
  color: rgba(44, 44, 52, 0.5); /* Light gray */
}

.myaccount-dashboard__logout a {
  color: var(--color-text-primary);
  text-decoration: underline;
}

.myaccount-dashboard__logout a:hover {
  color: var(--color-primary);
}

.myaccount-dashboard__description {
  font-size: 16px; /* Per Figma */
  font-weight: 300; /* Light weight */
  line-height: 1.6;
  color: rgba(44, 44, 52, 0.7); /* Slightly darker gray */
}

.myaccount-dashboard__description a {
  color: var(--color-text-primary);
  text-decoration: underline;
}

.myaccount-dashboard__description a:hover {
  color: var(--color-primary);
}

/* ============================================
   ORDERS PAGE - CARDS (ALL BREAKPOINTS)
   Per Figma design - cards on desktop, not table
   ============================================ */

.myaccount-orders {
  padding-top: 32px; /* Space after navigation line */
}

.myaccount-orders__list {
  display: flex;
  flex-direction: column;
  gap: 0; /* No gap - cards touch each other */
}

.order-card {
  border: 1px solid rgba(44, 44, 52, 0.15); /* Per Figma */
  border-radius: 0 !important; /* No border-radius per Figma */
  padding: 16px 24px; /* Per Figma */
  background: var(--color-white);
  margin-top: -1px; /* Overlap borders */
  box-shadow: none !important; /* Remove any shadow */
}

.order-card:first-child {
  margin-top: 0;
}

.order-card__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.order-card__info-group {
  display: flex;
  gap: 128px; /* Per Figma */
  align-items: center;
}

.order-card__info {
  display: flex;
  flex-direction: column;
  line-height: 2;
}

.order-card__label {
  font-family: var(--font-primary);
  font-size: 12px; /* Per Figma */
  font-weight: 300; /* Light */
  color: var(--color-text-primary);
  opacity: 0.5; /* Per Figma */
}

.order-card__value {
  font-family: var(--font-primary);
  font-size: 14px; /* Per Figma */
  font-weight: 400; /* Regular */
  color: var(--color-text-primary);
}

.order-card__right {
  display: flex;
  gap: 24px; /* More space between status and button */
  align-items: center;
}

/* Order Status Badges - Per Figma Design */
.order-status {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 4px 16px !important; /* Per Figma */
  border-radius: 222px !important; /* Full pill per Figma */
  font-family: var(--font-primary);
  font-size: 16px !important; /* Per Figma */
  font-weight: 400 !important; /* Regular */
  line-height: 2;
  text-transform: capitalize;
  background: rgba(44, 44, 52, 0.05) !important; /* Default background */
}

/* Default status (on-hold, pending, draft) */
.order-status--on-hold,
.order-status--pending,
.order-status--draft {
  color: #2C2C34 !important;
  background: rgba(44, 44, 52, 0.05) !important; /* Per Figma */
}

.order-status--completed {
  color: #34B82D;
  background: rgba(52, 184, 45, 0.1);
}

.order-status--reserved {
  color: #34B82D;
  background: rgba(52, 184, 45, 0.1);
}

.order-status--on_rent,
.order-status--on-rent {
  color: #FF9800;
  background: rgba(255, 152, 0, 0.1);
}

.order-status--returned {
  color: #FF9800;
  background: rgba(255, 152, 0, 0.1);
}

.order-status--proforma_sent,
.order-status--proforma-sent {
  color: #2196F3;
  background: rgba(33, 150, 243, 0.1);
}

.order-status--awaiting_availability,
.order-status--awaiting-availability {
  color: #2196F3;
  background: rgba(33, 150, 243, 0.1);
}

/* Details Button - Per Figma Design */
.order-card__details-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 24px; /* Per Figma */
  width: 135px; /* Per Figma */
  background: #2C2C34; /* Per Figma */
  color: #FCFDFF; /* Per Figma */
  font-family: var(--font-primary);
  font-size: 16px; /* Per Figma */
  font-weight: 400; /* Regular */
  line-height: 2;
  text-decoration: none;
  transition: var(--transition-base);
}

.order-card__details-btn:hover {
  background: #1a1a1f;
  color: #FCFDFF;
}

/* ============================================
   ORDERS PAGE - CARDS (MOBILE)
   ============================================ */

.myaccount-orders__cards {
  display: none; /* Hidden on desktop */
}

.order-card {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
}

.order-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border-light);
}

.order-card__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.order-card__number {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.order-card__body {
  margin-bottom: var(--space-md);
}

.order-card__row {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.order-card__value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

/* ============================================
   VIEW ORDER PAGE
   ============================================ */

.myaccount-view-order {
  padding-top: 32px; /* Space after navigation */
}

.myaccount-view-order__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 300;
  margin-bottom: 32px;
  transition: var(--transition-base);
}

.myaccount-view-order__back:hover {
  opacity: 0.7;
}

.myaccount-view-order__back i {
  font-size: 12px;
}

.myaccount-view-order__header {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 128px; /* Per Figma */
  align-items: center;
  margin-bottom: 32px;
  padding-bottom: 0;
  border-bottom: none;
}

.myaccount-view-order__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 2;
}

.myaccount-view-order__label {
  font-size: 12px; /* Per Figma */
  font-weight: 300;
  color: rgba(44, 44, 52, 0.5); /* Light gray per Figma */
}

.myaccount-view-order__number,
.myaccount-view-order__date {
  font-size: 14px; /* Per Figma */
  font-weight: 400;
  color: var(--color-text-primary);
}

.myaccount-view-order__status {
  justify-self: end;
}

/* Two-column layout: Table (left) + Sidebar (right) */
.myaccount-view-order__content {
  display: grid;
  grid-template-columns: 1fr 400px; /* Table takes remaining space, sidebar fixed width */
  gap: 48px; /* Space between columns */
  align-items: start;
}

.myaccount-view-order__items {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0; /* Cards touch each other */
}

/* Order Product Card - Individual cards per product */
.order-product-card {
  border: 1px solid rgba(44, 44, 52, 0.15);
  border-radius: 0;
  background: var(--color-white);
  margin-top: -1px; /* Overlap borders */
}

.order-product-card:first-child {
  margin-top: 0;
}

.order-product-card__row {
  display: grid;
  grid-template-columns: 1fr auto auto; /* Product flexible, Quantity and Total fixed */
  gap: 32px;
  padding: 16px 24px;
}

.order-product-card__col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 2;
}

.order-product-card__label {
  font-size: 12px;
  font-weight: 300;
  color: rgba(44, 44, 52, 0.5); /* Light gray */
}

.order-product-card__value {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-primary);
}

.order-product-card__product {
  display: flex;
  align-items: center;
  gap: 16px;
}

.order-product-card__thumbnail {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 0;
  background: #F5F5F5;
  flex-shrink: 0;
}

.order-product-card__name {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-primary);
}

/* Order Sidebar */
.myaccount-view-order__sidebar {
  width: 100%;
  max-width: none;
  margin-left: 0;
}

.order-detail-box {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: rgba(44, 44, 52, 0.05); /* Per Figma */
  border-radius: 0;
  margin-bottom: 16px;
  align-items: flex-start;
}

.order-detail-box__icon {
  flex-shrink: 0;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 0;
}

.order-detail-box__icon i {
  font-size: 16px;
  color: var(--color-text-primary);
}

.order-detail-box__content {
  flex: 1;
}

.order-detail-box__label {
  font-size: 12px;
  font-weight: 300;
  color: rgba(44, 44, 52, 0.5); /* Light gray */
  margin-bottom: 4px;
  line-height: 2;
}

.order-detail-box__value {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-primary);
  margin-bottom: 0;
  line-height: 2;
}

.order-detail-box__value i {
  margin-right: 4px;
  font-size: 12px;
}

.order-detail-box__meta {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: 2;
}

.order-detail-section {
  padding: 16px;
  background: rgba(44, 44, 52, 0.05); /* Light gray per Figma */
  border: none;
  border-radius: 0;
  margin-bottom: 16px;
}

/* Two-column layout for Company details & Billing Address */
.order-detail-section--two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 16px 24px;
}

.order-detail-section__column {
  display: flex;
  flex-direction: column;
}

.order-detail-section__title {
  font-size: 12px;
  font-weight: 300;
  color: rgba(44, 44, 52, 0.5); /* Light gray */
  margin-bottom: 8px;
  line-height: 2;
}

.order-detail-section__content {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: 2;
}

.order-detail-section__content p {
  margin-bottom: 0;
  line-height: 2;
}

/* Order Totals - Darker gray background per Figma */
.order-totals {
  padding: 16px;
  background: rgba(44, 44, 52, 0.1); /* Darker gray than other blocks */
  border-radius: 0;
}

.order-totals__row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: 2;
}

.order-totals__row:first-child {
  padding-top: 0;
}

.order-totals__row--total {
  padding-top: 8px;
  border-top: none;
  font-size: 14px;
  font-weight: 600; /* Semibold for total */
}

.order-totals__note {
  font-size: 12px;
  font-weight: 300;
  color: rgba(44, 44, 52, 0.5); /* Light gray */
  margin-top: 8px;
  line-height: 2;
}

/* ============================================
   ADDRESSES PAGE
   ============================================ */

.myaccount-addresses {
  padding-top: 48px; /* Space after navigation per Figma */
  display: flex;
  flex-direction: column;
  align-items: center; /* Center content */
}

.myaccount-addresses__info {
  display: flex;
  align-items: center;
  gap: 16px; /* Per Figma */
  padding: 8px 16px; /* Per Figma */
  background: #F8F9FB; /* Per Figma */
  margin-bottom: 92px; /* Space before addresses per Figma */
  font-family: var(--font-primary);
  font-size: 14px; /* Per Figma */
  font-weight: 300; /* Light */
  line-height: 2;
  color: #2C2C34; /* Per Figma */
  width: fit-content; /* Don't take full width */
  margin-left: auto;
  margin-right: auto;
}

.myaccount-addresses__info i {
  font-size: 14px;
  color: #2C2C34; /* Same color as text per Figma */
}

.myaccount-addresses__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px; /* Gap between columns per Figma */
  width: 664px; /* Fixed width per Figma design */
}

.address-box,
.woocommerce-Address {
  /* Explicit reset - no border, no padding, no background per Figma */
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.address-box__title {
  font-family: var(--font-primary);
  font-size: 20px; /* Per Figma - H4 */
  font-weight: 400; /* Regular */
  line-height: 1.29;
  color: #2C2C34; /* Per Figma */
  margin-bottom: 42px; /* Space before content per Figma */
}

.address-box__content {
  font-family: var(--font-primary);
  font-size: 14px; /* Per Figma */
  font-weight: 300; /* Light */
  line-height: 2;
  color: #2C2C34;
  opacity: 0.5; /* Per Figma */
  margin-bottom: 184px; /* Space before edit button per Figma */
  min-height: auto;
}

.address-box__content p {
  margin-bottom: 0; /* No spacing between lines per Figma */
}

.address-box__empty {
  color: #2C2C34;
  opacity: 0.5;
  font-style: normal;
}

.address-box__edit {
  display: inline-flex;
  align-items: center;
  gap: 16px; /* Per Figma */
  color: #2C2C34; /* Per Figma */
  text-decoration: none; /* No underline per Figma */
  font-family: var(--font-primary);
  font-size: 16px; /* Per Figma - Buttons */
  font-weight: 400; /* Regular */
  line-height: 2;
  padding: 4px 0; /* Minimal padding */
  transition: var(--transition-base);
}

.address-box__edit i {
  font-size: 16px;
}

.address-box__edit:hover {
  opacity: 0.7;
}

/* ============================================
   EDIT ADDRESS / ACCOUNT DETAILS FORMS
   ============================================ */

.myaccount-edit-address__back {
  display: inline-flex;
  align-items: center;
  gap: 16px; /* Per Figma */
  color: #2C2C34; /* Per Figma */
  text-decoration: none;
  font-family: var(--font-primary);
  font-size: 16px; /* Per Figma */
  font-weight: 400; /* Regular */
  line-height: 2;
  margin-bottom: 72px; /* Space before title per Figma */
  padding: 4px 0;
  transition: var(--transition-base);
}

.myaccount-edit-address__back i {
  font-size: 16px;
}

.myaccount-edit-address__back:hover {
  opacity: 0.7;
}

.myaccount-edit-address__title {
  font-family: var(--font-primary);
  font-size: 20px; /* Per Figma - H4 */
  font-weight: 400; /* Regular */
  line-height: 1.29;
  color: #2C2C34; /* Per Figma */
  margin-bottom: 42px; /* Space before first section per Figma (368-326=42px) */
}

.myaccount-edit-address {
  padding-top: 48px; /* Space after navigation per Figma */
  display: flex;
  flex-direction: column;
  align-items: center; /* Center content */
  width: 100%;
}

.myaccount-form {
  max-width: 664px; /* Per Figma design */
  width: 100%;
}

.myaccount-edit-account {
  padding-top: 48px; /* Space after navigation per Figma */
  display: flex;
  justify-content: center; /* Center content */
}

.myaccount-form__section {
  margin-bottom: 64px; /* Increased spacing between sections per Figma */
}

.myaccount-form__section-title {
  font-size: 14px; /* H5 style per Figma */
  font-weight: 400; /* Regular weight per Figma */
  font-family: var(--font-primary);
  color: var(--color-text-primary);
  line-height: 2; /* Per Figma H5 style */
  margin-bottom: 32px; /* Space below title per Figma */
}

.myaccount-form__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 64px; /* Larger gap between columns per Figma */
  margin-bottom: 0; /* Remove bottom margin, handled by form-field */
}

.form-field {
  margin-bottom: 40px; /* Spacing between fields per Figma */
}

.form-field label {
  display: block;
  font-size: 10px; /* Per Figma input labels */
  font-weight: 400; /* Regular weight per Figma */
  font-family: var(--font-primary);
  line-height: 2; /* Per Figma */
  color: rgba(44, 44, 52, 0.5); /* 50% opacity per Figma */
  margin-bottom: 8px; /* Minimal space per Figma */
}

.form-field .form-control {
  width: 100%;
  padding: 4px 0; /* Minimal padding per Figma (py-[4px]) */
  font-size: 14px; /* Per Figma input text */
  font-weight: 300; /* Light weight per Figma */
  font-family: var(--font-primary);
  line-height: 2; /* Per Figma */
  color: var(--color-text-primary);
  background: transparent; /* No background */
  border: none; /* Remove all borders */
  border-bottom: 0.5px solid rgba(44, 44, 52, 0.2); /* Bottom border 0.5px per Figma */
  border-radius: 0; /* No border radius */
  transition: var(--transition-base);
}

.form-field .form-control:focus {
  outline: none;
  border-bottom-color: var(--color-text-primary); /* Darker on focus */
}

.form-field select.form-control {
  appearance: none; /* Remove default browser styling */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%232C2C34' d='M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z'/%3E%3C/svg%3E"); /* Font Awesome chevron-down */
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 12px;
  padding-right: 20px; /* Space for chevron */
  cursor: pointer;
}

.form-field__hint {
  display: block;
  font-size: 12px; /* Smaller hint text per Figma */
  font-weight: 300;
  color: rgba(44, 44, 52, 0.5); /* Light gray per Figma */
  margin-top: 8px;
  line-height: 1.5;
}

.form-field__password {
  position: relative;
}

.form-field__toggle-password {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(44, 44, 52, 0.5);
  cursor: pointer;
  padding: 8px;
  transition: var(--transition-base);
}

.form-field__toggle-password:hover {
  color: var(--color-text-primary);
}

/* Save Changes Button - Per Figma */
.myaccount-form .btn--primary {
  margin-top: 24px;
  padding: 12px 48px; /* Larger button per Figma */
  font-size: 16px;
  font-weight: 400;
  background: #2C2C34; /* Dark background per Figma */
  color: #FCFDFF;
  border-radius: 0; /* No border radius per Figma */
  transition: var(--transition-base);
}

.myaccount-form .btn--primary:hover {
  background: #1a1a1f;
  color: #FCFDFF;
}

/* ============================================
   WISHLIST PAGE
   ============================================ */

.myaccount-wishlist__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2xl);
}

.wishlist-products {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.wishlist-product-card {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 24px;
  background: transparent;
  border: none;
  position: relative;
  transition: all 0.3s ease;
}

.wishlist-product-card:hover {
  background: #FFFFFF;
  border: 1px solid #F8F9FB;
  box-shadow: 0px 17px 22.7px -12px rgba(162, 162, 162, 0.25);
}

.wishlist-product-card__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
}

.wishlist-product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wishlist-product-card__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wishlist-product-card__title {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.29;
  color: #2C2C34;
  margin: 0;
}

.wishlist-product-card__title a {
  color: #2C2C34;
  text-decoration: none;
}

.wishlist-product-card__title a:hover {
  color: #2C2C34;
}

.wishlist-product-card__price {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 2;
  color: #2C2C34;
  margin: 0;
}

.wishlist-product-card__actions {
  display: none;
  gap: 16px;
  align-items: center;
  margin-top: auto;
}

.wishlist-product-card:hover .wishlist-product-card__actions {
  display: flex;
}

.wishlist-product-card__actions .btn {
  flex: 1;
  min-height: 40px;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
  padding: 4px 24px;
  background: #2C2C34;
  color: #FCFDFF;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
}

.wishlist-product-card__actions .btn:hover {
  background: #1a1a1f;
}

.btn-wishlist-remove {
  width: 40px;
  height: 40px;
  min-width: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #B82D2D;
  color: #FCFDFF;
  border: none;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.btn-wishlist-remove:hover {
  background: #a02525;
  transform: scale(1.05);
}

.myaccount-wishlist__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 32px;
  min-height: 400px;
}

.myaccount-wishlist__loading p {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: #6b7280;
}

.myaccount-wishlist__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 32px;
  min-height: 400px;
}

.myaccount-wishlist__empty i {
  font-size: 80px;
  color: #d1d5db;
  margin-bottom: 24px;
  display: block;
}

.myaccount-wishlist__empty p {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: #6b7280;
  margin-bottom: 32px;
  max-width: 400px;
}

.myaccount-wishlist__empty .btn {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 400;
  padding: 12px 32px;
  background: #2C2C34;
  color: #FCFDFF;
  border: none;
  text-decoration: none;
  display: inline-block;
  transition: background 0.3s ease;
}

.myaccount-wishlist__empty .btn:hover {
  background: #1a1a1f;
}

/* Responsive wishlist grid */
@media (max-width: 1440px) {
  .wishlist-products {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1024px) {
  .wishlist-products {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .wishlist-products {
    grid-template-columns: repeat(2, 1fr);
  }

  .wishlist-product-card {
    padding: 16px;
  }
}

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

/* ============================================
   BUTTONS
   ============================================ */

.btn {
  display: inline-block;
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-primary);
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: var(--transition-base);
  cursor: pointer;
  border: none;
}

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

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

.btn--sm {
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--font-size-sm);
}

.btn--block {
  width: 100%;
  display: block;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 1023px) {
  /* Navigation - Mobile */
  .myaccount-navigation__mobile-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    margin-bottom: var(--space-md);
  }

  .myaccount-navigation__mobile-toggle i {
    transition: transform var(--transition-base);
  }

  .myaccount-navigation__mobile-toggle.is-open i {
    transform: rotate(180deg);
  }

  .myaccount-navigation__menu {
    display: none;
    flex-direction: column;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .myaccount-navigation__menu.is-open {
    display: flex;
  }

  .myaccount-navigation__link {
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border-light);
  }

  .myaccount-navigation__item:last-child .myaccount-navigation__link {
    border-bottom: none;
  }

  .myaccount-navigation__item.is-active .myaccount-navigation__link {
    background: var(--color-primary);
    color: var(--color-white);
  }

  /* Orders - Mobile layout */
  .order-card__content {
    flex-direction: column;
    gap: 16px;
  }

  .order-card__info-group {
    flex-direction: column;
    gap: 16px;
  }

  .order-card__right {
    justify-content: space-between;
    width: 100%;
  }

  /* View Order - Stack layout */
  .myaccount-view-order__header {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .myaccount-view-order__status {
    justify-self: start;
  }

  /* Two-column becomes single column on mobile */
  .myaccount-view-order__content {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Product cards stack vertically on mobile */
  .order-product-card__row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Two-column address section becomes single column */
  .order-detail-section--two-columns {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .myaccount-view-order__sidebar {
    max-width: 100%;
    margin-left: 0;
  }

  /* Addresses - Single column */
  .myaccount-addresses__grid {
    grid-template-columns: 1fr;
  }

  /* Form - Single column */
  .myaccount-form__row {
    grid-template-columns: 1fr;
  }

  /* Wishlist - 2 columns */
  .wishlist-products {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
}

@media (max-width: 767px) {
  .myaccount-page {
    padding: var(--space-2xl) 0;
  }

  .myaccount-page__container {
    padding: 0 16px; /* Mobile padding per Figma */
  }

  /* Wishlist - 1 column on mobile */
  .wishlist-products {
    grid-template-columns: 1fr;
  }
}