/* ==========================================================================
   Katanyu WooCommerce My Account - Bento Grid Design System
   ========================================================================== */

/* Outer Layout Container - Scope strictly to My Account page with navigation */
.woocommerce:has(.woocommerce-MyAccount-navigation),
.woocommerce-account .woocommerce {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  align-items: flex-start !important;
  width: 100% !important;
  margin: 20px auto !important;
  box-sizing: border-box !important;
  clear: both !important;
}

.woocommerce:has(.woocommerce-MyAccount-navigation)::after,
.woocommerce:has(.woocommerce-MyAccount-navigation)::before,
.woocommerce-account .woocommerce::after,
.woocommerce-account .woocommerce::before {
  display: none !important;
}

/* ==========================================================================
   1. Bento Card: Navigation Sidebar
   ========================================================================== */
.woocommerce-MyAccount-navigation {
  float: none !important;
  flex: 0 0 260px !important;
  width: 260px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 16px 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04) !important;
  position: sticky;
  top: 100px;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.woocommerce-MyAccount-navigation li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce-MyAccount-navigation li a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: #43593b !important;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out !important;
  background: transparent !important;
}

/* Icon Styling via SVG Backgrounds */
.woocommerce-MyAccount-navigation li a::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}

/* Specific SVG Icons */
.woocommerce-MyAccount-navigation-link--dashboard a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2343593b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--orders a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2343593b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--downloads a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2343593b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--edit-address a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2343593b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--edit-account a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2343593b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--customer-logout a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23e53e3e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' x2='9' y1='12' y2='12'/%3E%3C/svg%3E");
}

/* Nav Item Hover State */
.woocommerce-MyAccount-navigation li a:hover {
  background: #fdfbf7 !important;
  color: #43593b !important;
  transform: translateX(4px);
}

/* Active Nav Item State */
.woocommerce-MyAccount-navigation li.is-active a {
  background: #43593b !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(67, 89, 59, 0.25) !important;
  transform: none !important;
}

/* Active SVG Icon Inversion */
.woocommerce-MyAccount-navigation-link--dashboard.is-active a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--orders.is-active a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--downloads.is-active a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--edit-address.is-active a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--edit-account.is-active a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

/* Logout Item Divider */
.woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid #f0f0f0 !important;
}

.woocommerce-MyAccount-navigation-link--customer-logout a {
  color: #e53e3e !important;
}

.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
  background: #fff5f5 !important;
  color: #c53030 !important;
}

/* ==========================================================================
   2. Bento Card: Main Content Area
   ========================================================================== */
.woocommerce-MyAccount-content {
  float: none !important;
  flex: 1 1 500px !important;
  width: auto !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 32px 36px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04) !important;
  min-height: 400px;
}

/* Welcome Dashboard Card */
.woocommerce-MyAccount-content > p:first-of-type {
  background: #fdfbf7;
  border: 1px solid #e8d7b9;
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 24px;
  font-size: 1rem;
  color: #626262;
  line-height: 1.6;
}

.woocommerce-MyAccount-content > p:first-of-type strong {
  color: #43593b;
  font-weight: 600;
}

.woocommerce-MyAccount-content > p:first-of-type a {
  color: #e53e3e;
  text-decoration: none !important;
  font-weight: 500;
}

/* General Text & Paragraphs */
.woocommerce-MyAccount-content > p {
  color: #626262;
  line-height: 1.7;
  font-size: 0.98rem;
}

.woocommerce-MyAccount-content > p a {
  color: #43593b;
  font-weight: 600;
  text-decoration: none !important;
  border-bottom: 1px dashed #43593b;
  transition: border-color 0.2s;
}

.woocommerce-MyAccount-content > p a:hover {
  border-bottom-style: solid;
}

/* ==========================================================================
   3. Tables (Orders, Downloads, Addresses) - Full 100% Container Width
   ========================================================================== */
.woocommerce-MyAccount-orders,
.woocommerce-orders-table__wrapper,
.woocommerce-Orders-table,
.woocommerce-MyAccount-content div:has(> table) {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
  margin-bottom: 28px !important;
}

.woocommerce-MyAccount-content table,
.woocommerce-MyAccount-content table.shop_table,
.woocommerce-MyAccount-content .woocommerce-orders-table,
.woocommerce-orders-table,
table.account-orders-table,
table.woocommerce-orders-table,
table.shop_table.my_account_orders,
.woocommerce-MyAccount-orders table {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  display: table !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid #eee !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
}

/* Specific Column Width Distribution for Orders Table */
.woocommerce-orders-table__header-order-number,
.woocommerce-orders-table__cell-order-number {
  width: 12% !important;
}

.woocommerce-orders-table__header-order-date,
.woocommerce-orders-table__cell-order-date {
  width: 22% !important;
}

.woocommerce-orders-table__header-order-status,
.woocommerce-orders-table__cell-order-status {
  width: 20% !important;
}

.woocommerce-orders-table__header-order-total,
.woocommerce-orders-table__cell-order-total {
  width: 26% !important;
  white-space: nowrap !important;
}

.woocommerce-orders-table__header-order-actions,
.woocommerce-orders-table__cell-order-actions {
  width: 20% !important;
  text-align: right !important;
}

.woocommerce-MyAccount-content table th,
.woocommerce-MyAccount-content table td,
.woocommerce-orders-table th,
.woocommerce-orders-table td {
  padding: 16px 18px !important;
  color: #444444 !important;
  border-bottom: 1px solid #f0f0f0 !important;
  font-size: 0.95rem !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

.woocommerce-MyAccount-content table th,
.woocommerce-orders-table th {
  background: #fdfbf7 !important;
  color: #43593b !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  border-bottom: 1px solid #eee !important;
}

.woocommerce-MyAccount-content table tr:last-child td,
.woocommerce-orders-table tr:last-child td {
  border-bottom: none !important;
}

/* Order Status Cell Pill Badges */
.woocommerce-orders-table__cell-order-status,
td.order-status {
  white-space: nowrap !important;
  font-weight: 600 !important;
  color: #43593b !important;
}

/* ==========================================================================
   4. Forms & Input Fields
   ========================================================================== */
.woocommerce-MyAccount-content form .form-row {
  margin-bottom: 20px;
}

.woocommerce-MyAccount-content form label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #43593b;
  margin-bottom: 8px;
}

.woocommerce-MyAccount-content form input.input-text,
.woocommerce-MyAccount-content form select,
.woocommerce-MyAccount-content form textarea {
  width: 100% !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  border: 1px solid #e0e0e0 !important;
  background-color: #fcfcfc !important;
  font-size: 0.95rem !important;
  color: #121212 !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.woocommerce-MyAccount-content form input.input-text:focus,
.woocommerce-MyAccount-content form select:focus,
.woocommerce-MyAccount-content form textarea:focus {
  background-color: #ffffff;
  border-color: #43593b;
  box-shadow: 0 0 0 3px rgba(67, 89, 59, 0.12);
  outline: none;
}

/* Buttons */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #43593b !important;
  color: #ffffff !important;
  padding: 12px 28px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(67, 89, 59, 0.2);
  text-decoration: none !important;
}

.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover {
  background: #34472d !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(52, 71, 45, 0.3);
}

/* Address Page Intro Banner */
.woocommerce-MyAccount-content > p:first-of-type {
  background: #fdfbf7 !important;
  border: 1px solid #e8d7b9 !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  margin-bottom: 24px !important;
  font-size: 0.98rem !important;
  color: #626262 !important;
}

/* Address Cards Flex Column Layout */
.woocommerce-Addresses,
.u-columns.woocommerce-Addresses {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  margin-top: 24px !important;
  width: 100% !important;
  clear: both !important;
}

.woocommerce-Address,
.u-column1.woocommerce-Address,
.u-column2.woocommerce-Address {
  float: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 18px !important;
  padding: 24px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: all 0.25s ease !important;
}

.woocommerce-Address:hover {
  border-color: rgba(67, 89, 59, 0.3) !important;
  box-shadow: 0 8px 24px rgba(67, 89, 59, 0.08) !important;
  transform: translateY(-2px) !important;
}

.woocommerce-Address header,
.woocommerce-Address .title {
  display: flex !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid #f5f5f5 !important;
}

.woocommerce-Address header h3,
.woocommerce-Address .title h3 {
  margin: 0 !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #43593b !important;
}

.woocommerce-Address header .edit,
.woocommerce-Address .title .edit,
.woocommerce-Address a.edit {
  display: inline-flex !important;
  align-items: center !important;
  background-color: #fdfbf7 !important;
  color: #43593b !important;
  border: 1px solid #e8d7b9 !important;
  padding: 6px 16px !important;
  border-radius: 10px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  margin: 0 !important;
  transition: all 0.2s ease !important;
}

.woocommerce-Address header .edit:hover,
.woocommerce-Address a.edit:hover {
  background-color: #43593b !important;
  color: #ffffff !important;
  border-color: #43593b !important;
  box-shadow: 0 4px 12px rgba(67, 89, 59, 0.2) !important;
}

.woocommerce-Address address {
  font-style: normal !important;
  color: #626262 !important;
  line-height: 1.6 !important;
  font-size: 0.95rem !important;
  margin-bottom: 0 !important;
}

/* Notices & Alerts */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin-bottom: 24px !important;
  font-size: 0.95rem !important;
  list-style: none !important;
}

.woocommerce-message {
  background-color: #f0fff4 !important;
  border-left: 4px solid #43593b !important;
  color: #22543d !important;
}

#account_display_name_description {
  margin-top: 10px !important;
  display: block !important;
}

/* WooCommerce Block Notice Banner Styling */
.wc-block-components-notice-banner {
  border-radius: 14px !important;
  padding: 14px 20px !important;
  border: 1px solid rgba(67, 89, 59, 0.15) !important;
  background-color: #fdfbf7 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
  margin-bottom: 24px !important;
}

.wc-block-components-notice-banner
  > .wc-block-components-notice-banner__content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  color: #43593b !important;
  font-size: 0.95rem !important;
}

.wc-block-components-notice-banner
  > .wc-block-components-notice-banner__content
  .wc-forward {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #43593b !important;
  color: #ffffff !important;
  padding: 8px 18px !important;
  border-radius: 10px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.wc-block-components-notice-banner
  > .wc-block-components-notice-banner__content
  .wc-forward:hover {
  background-color: #34472d !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(52, 71, 45, 0.2) !important;
}

/* ==========================================================================
   5. Mobile Responsive Adjustments
   ========================================================================== */
@media (max-width: 868px) {
  .woocommerce,
  .woocommerce-account .woocommerce,
  .entry-content .woocommerce {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .woocommerce-MyAccount-navigation {
    width: 100% !important;
    flex: 1 1 100% !important;
    position: static !important;
  }

  .woocommerce-MyAccount-navigation ul {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }

  .woocommerce-MyAccount-navigation li {
    flex: 1 1 calc(50% - 6px) !important;
  }

  .woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
  }

  .woocommerce-MyAccount-content {
    width: 100% !important;
    flex: 1 1 100% !important;
    padding: 24px 20px !important;
  }

  .woocommerce-MyAccount-orders,
  .woocommerce-orders-table__wrapper,
  .woocommerce-Orders-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .woocommerce-MyAccount-content table,
  .woocommerce-orders-table {
    min-width: 600px !important;
    table-layout: auto !important;
  }
}

/* Hide Downloads Menu Link Completely */
.woocommerce-MyAccount-navigation-link--downloads,
li.woocommerce-MyAccount-navigation-link--downloads {
  display: none !important;
}