/* =============================================
   OMA TILI – B2B-Kauppa My Account
   ============================================= */


/* ── Nollaa page.php wrapper-tyylit ── */
body.woocommerce-account .entry-header  { display: none; }
body.woocommerce-account .entry-content { max-width: none; padding: 0; margin: 0; }
body.woocommerce-account .site-content  { max-width: none; padding: 0; margin: 0; }
body.woocommerce-account .page-content  { max-width: none; padding: 0; margin: 0; }


/* =============================================
   HERO-BANNERI
   ============================================= */
.account-hero {
    background: var(--navy);
    min-height: 450px;
    margin-top: -110px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 110px 0 0;
    padding-bottom: 50px;
}

.account-hero .container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1.5rem;
    text-align: center;
}

.account-hero__title {
    font-family: var(--font);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: var(--white);
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}

.account-hero__subtitle {
    font-family: var(--font);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 400;
    margin: 0;
}


/* =============================================
   ACCOUNT PAGE WRAPPER
   ============================================= */
.b2b-account-page {
    max-width: var(--container);
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}


/* =============================================
   LAYOUT: sidebar + content
   ============================================= */
.b2b-account {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2.5rem;
    align-items: start;
    min-height: 50vh;
}


/* =============================================
   SIDEBAR
   ============================================= */
.b2b-account__sidebar {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

/* ── Käyttäjäkortti ── */
.b2b-account__user-card {
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid var(--gray-200);
}

.b2b-account__user-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.b2b-account__user-name {
    font-family: var(--font);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--navy);
}

.b2b-account__user-company {
    font-size: 0.8125rem;
    color: var(--gray-600);
    font-weight: 500;
}

.b2b-account__user-email {
    font-size: 0.8125rem;
    color: var(--gray-400);
}

/* ── Navigaatio ── */
.b2b-account__nav {
    padding: 0.5rem 0;
}

/* WC navigaatiolista resetit — .woocommerce-account prefix tarvitaan
   jotta yliajaa WC:n oletus float:left + width:30% (specificity) */
.woocommerce-account .woocommerce-MyAccount-navigation {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
}
.woocommerce-MyAccount-navigation ul    { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.woocommerce-MyAccount-navigation ul li { margin: 0; padding: 0; }

.woocommerce-MyAccount-navigation ul li a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    font-family: var(--font);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--gray-600);
    text-decoration: none;
    transition: all 0.15s var(--ease);
    border-left: 3px solid transparent;
    width: 100%;
}

.woocommerce-MyAccount-navigation ul li a:hover {
    color: var(--navy);
    background: var(--gray-50);
}

/* Aktiivinen — kokoleveä: tausta li:hin joka on aina 100% */
.woocommerce-MyAccount-navigation ul li.is-active {
    background: rgba(17, 57, 103, 0.06);
}

.woocommerce-MyAccount-navigation ul li.is-active a {
    color: var(--navy);
    font-weight: 600;
    background: none;
    border-left-color: var(--navy);
}

/* ── Nav-ikonit ── */
.woocommerce-MyAccount-navigation ul li a::before {
    content: '';
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    transition: opacity 0.2s var(--ease);
}

.woocommerce-MyAccount-navigation ul li a:hover::before,
.woocommerce-MyAccount-navigation ul li.is-active a::before { opacity: 0.85; }

/* Per endpoint */
.woocommerce-MyAccount-navigation-link--dashboard a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23113967' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%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='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23113967' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 01-8 0'/%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='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23113967' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 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='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23113967' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z'/%3E%3C/svg%3E");
}

/* Piilota WC:n logout-linkki navigaatiosta (oma on sidebar-pohjalla) */
.woocommerce-MyAccount-navigation-link--customer-logout { display: none; }

/* ── Sidebar pikanapit ── */
.b2b-account__quick {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.b2b-account__quick-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.5rem;
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--navy);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s var(--ease);
}

.b2b-account__quick-link:hover {
    background: var(--gray-50);
}

.b2b-account__quick-link svg {
    flex-shrink: 0;
    color: var(--navy);
    opacity: 0.5;
}

.b2b-account__quick-link:hover svg { opacity: 0.8; }

/* ── Sidebar logout ── */
.b2b-account__logout {
    margin-top: auto;
    border-top: 1px solid var(--gray-200);
    padding: 0.75rem 1.25rem;
}

.b2b-account__logout-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-400);
    text-decoration: none;
    transition: color 0.2s var(--ease);
    padding: 0.375rem 0;
}

.b2b-account__logout-link:hover { color: var(--orange); }
.b2b-account__logout-link svg   { flex-shrink: 0; opacity: 0.55; }


/* =============================================
   CONTENT AREA
   ============================================= */
.b2b-account__content {
    min-width: 0;
}

/* WC oletus float override — tarvitsee .woocommerce-account prefixin specificityn takia */
.woocommerce-account .woocommerce-MyAccount-content {
    float: none;
    width: auto;
}

/* ── Piilota WC:n oletus "Hei X (etkö ole X? Kirjaudu ulos)" ── */
.woocommerce-MyAccount-content > p:first-child { display: none; }


/* =============================================
   DASHBOARD – tervetuloa, pikanapit, viimeksi katsotut
   ============================================= */

/* ── Tervetuloa-banneri ── */
.acct-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
    border-radius: var(--radius-lg);
    padding: 2rem 2.25rem;
    margin-bottom: 2rem;
    color: var(--white);
}

.acct-welcome__title {
    font-family: var(--font);
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--white) !important;
}

.acct-welcome__desc {
    font-family: var(--font);
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.acct-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    padding: 1rem 1.75rem;
    min-width: 90px;
}

.acct-stat__num {
    font-family: var(--font);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--white);
}

.acct-stat__label {
    font-family: var(--font);
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Viimeksi katsotut ── */
.acct-section {
    margin-bottom: 2rem;
}

.acct-section__title {
    font-family: var(--font);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 1rem;
}

/* Viimeksi katsotut — käyttää katalogin lc-card (lista) partialeja */
.acct-viewed-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Tilaukset-taulukko ── */
.woocommerce-orders-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font);
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
}

.woocommerce-orders-table thead th {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.875rem 1.125rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    text-align: left;
}

.woocommerce-orders-table tbody td {
    padding: 0.875rem 1.125rem;
    font-size: 0.9375rem;
    color: var(--text);
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
}

.woocommerce-orders-table tbody tr:last-child td { border-bottom: none; }
.woocommerce-orders-table tbody tr:hover          { background: var(--gray-50); }

.woocommerce-orders-table__cell-order-number a {
    font-weight: 600;
    color: var(--navy);
    text-decoration: none;
}

.woocommerce-orders-table__cell-order-number a:hover { text-decoration: underline; }

.woocommerce-orders-table__cell-order-actions a {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 1rem;
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: var(--pill);
    text-decoration: none;
    transition: all 0.2s var(--ease);
    background: var(--navy);
    color: var(--white);
}

.woocommerce-orders-table__cell-order-actions a:hover {
    background: var(--navy-dark);
}


/* ── Osoitteet ── */
.woocommerce-account .woocommerce-Addresses {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* WC layout: .woocommerce .col2-set .col-1 { float:left; width:48% }
   Täsmällinen override samalla rakenteella */
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2 {
    float: none !important;
    width: 100% !important;
}

/* Clearfix-pseudot pois gridistä */
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after {
    display: none !important;
}

.woocommerce-account .woocommerce-Addresses .woocommerce-Address,
.woocommerce-account .addresses .woocommerce-Address {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.woocommerce-account .woocommerce-Address-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
    font-family: var(--font);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--navy);
    margin: 0;
}

.woocommerce-account .woocommerce-Address-title a {
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--navy);
    text-decoration: none;
    padding: 0.25rem 0.75rem;
    border-radius: var(--pill);
    border: 1px solid var(--gray-200);
    transition: all 0.2s var(--ease);
    white-space: nowrap;
}

.woocommerce-account .woocommerce-Address-title a:hover {
    background: var(--navy);
    color: var(--white);
    border-color: var(--navy);
}

.woocommerce-account .woocommerce-Addresses address,
.woocommerce-account .addresses address {
    padding: 1rem 1.25rem;
    font-family: var(--font);
    font-size: 0.9375rem;
    font-style: normal;
    color: var(--gray-600);
    line-height: 1.65;
}

/* "Kassalla käytetään näitä..." teksti */
.woocommerce-account .woocommerce-MyAccount-content > p {
    font-family: var(--font);
    font-size: 0.9375rem;
    color: var(--gray-500);
    margin-bottom: 1.25rem;
}


/* ── Lomakkeet (osoitteen muokkaus, tilin asetukset) ── */
.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    padding: 2rem;
}

/* Rivi-layout: etunimi + sukunimi vierekkäin */
.woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row--first,
.woocommerce-account .woocommerce-EditAccountForm .form-row-first {
    display: inline-block;
    width: 48.5%;
    margin-right: 3%;
    vertical-align: top;
}

.woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row--last,
.woocommerce-account .woocommerce-EditAccountForm .form-row-last {
    display: inline-block;
    width: 48.5%;
    vertical-align: top;
}

.woocommerce-account .woocommerce-EditAccountForm .form-row,
.woocommerce-account .woocommerce-address-fields .form-row {
    margin-bottom: 1.25rem;
}

.woocommerce-account .woocommerce-EditAccountForm label,
.woocommerce-account .woocommerce-address-fields label {
    display: block;
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 0.375rem;
}

.woocommerce-account .woocommerce-EditAccountForm label .required,
.woocommerce-account .woocommerce-address-fields label .required {
    color: var(--orange);
}

/* Kuvaus-teksti ("Nimesi näytetään tällä tavalla...") */
.woocommerce-account .woocommerce-EditAccountForm .form-row em,
.woocommerce-account .woocommerce-EditAccountForm .form-row small,
.woocommerce-account .woocommerce-EditAccountForm .form-row span.description,
.woocommerce-account .woocommerce-EditAccountForm p em {
    font-family: var(--font);
    font-size: 0.75rem;
    font-weight: 400;
    font-style: normal;
    color: var(--gray-400);
    display: block;
    margin-top: 0.25rem;
}

.woocommerce-account .woocommerce-EditAccountForm input[type="text"],
.woocommerce-account .woocommerce-EditAccountForm input[type="email"],
.woocommerce-account .woocommerce-EditAccountForm input[type="password"],
.woocommerce-account .woocommerce-EditAccountForm input[type="tel"],
.woocommerce-account .woocommerce-address-fields input[type="text"],
.woocommerce-account .woocommerce-address-fields input[type="email"],
.woocommerce-account .woocommerce-address-fields input[type="password"],
.woocommerce-account .woocommerce-address-fields input[type="tel"],
.woocommerce-account .woocommerce-address-fields select,
.woocommerce-account .woocommerce-EditAccountForm select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font);
    font-size: 0.9375rem;
    color: var(--text);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
    -webkit-appearance: none;
    appearance: none;
}

.woocommerce-account .woocommerce-EditAccountForm input:focus,
.woocommerce-account .woocommerce-address-fields input:focus,
.woocommerce-account .woocommerce-EditAccountForm select:focus,
.woocommerce-account .woocommerce-address-fields select:focus {
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(17, 57, 103, 0.08);
    background: var(--white);
}

/* Password visibility toggle */
.woocommerce-account .woocommerce-EditAccountForm .password-input,
.woocommerce-account .woocommerce-address-fields .password-input {
    position: relative;
}

.woocommerce-account .woocommerce-EditAccountForm .show-password-input,
.woocommerce-account .woocommerce-address-fields .show-password-input {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    padding: 4px;
}

/* Submit */
.woocommerce-account .woocommerce-EditAccountForm button[type="submit"],
.woocommerce-account .woocommerce-address-fields button[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-account .woocommerce-MyAccount-content button.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2rem;
    font-family: var(--font);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--white);
    background: var(--orange);
    border: none;
    border-radius: var(--pill);
    cursor: pointer;
    transition: background 0.2s var(--ease), transform 0.15s var(--ease);
    margin-top: 0.5rem;
}

.woocommerce-account .woocommerce-EditAccountForm button[type="submit"]:hover,
.woocommerce-account .woocommerce-address-fields button[type="submit"]:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-account .woocommerce-MyAccount-content button.button:hover {
    background: var(--orange-hover);
    transform: translateY(-1px);
}

/* Fieldset – salasanan vaihto */
.woocommerce-account .woocommerce-EditAccountForm fieldset {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.woocommerce-account .woocommerce-EditAccountForm fieldset legend {
    font-family: var(--font);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--navy);
    padding: 0 0.5rem;
}


/* ── WC-ilmoitukset ── */
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-error,
.woocommerce-MyAccount-content .woocommerce-info {
    font-family: var(--font);
    font-size: 0.9375rem;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border: none;
}

.woocommerce-MyAccount-content .woocommerce-message { background: #e8f5e9; color: #2e7d32; }
.woocommerce-MyAccount-content .woocommerce-error   { background: #fce4ec; color: #c62828; }
.woocommerce-MyAccount-content .woocommerce-info    { background: rgba(17, 57, 103, 0.06); color: var(--navy); }


/* ── Otsikot content-alueella ── */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
    font-family: var(--font);
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 1rem;
}

.woocommerce-MyAccount-content h2 { font-size: 1.25rem; }
.woocommerce-MyAccount-content h3 { font-size: 1.0625rem; }


/* ── Tilausten tiedot (single order view) ── */
.woocommerce-order-details {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.woocommerce-table--order-details {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font);
}

.woocommerce-table--order-details thead th {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.75rem 0;
    border-bottom: 2px solid var(--gray-200);
    text-align: left;
}

.woocommerce-table--order-details tbody td,
.woocommerce-table--order-details tfoot td,
.woocommerce-table--order-details tfoot th {
    padding: 0.75rem 0;
    font-size: 0.9375rem;
    border-bottom: 1px solid var(--gray-100);
}

.woocommerce-table--order-details tfoot th {
    font-weight: 600;
    color: var(--navy);
}


/* =============================================
   TILAUSLISTA – korttipohjainen
   ============================================= */
.b2b-orders {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.b2b-order-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    text-decoration: none;
    transition: all 0.15s var(--ease);
    box-shadow: var(--shadow-sm);
}

.b2b-order-card:hover {
    border-color: var(--gray-300);
    box-shadow: var(--shadow-md);
}

/* Tuotekuvat */
.b2b-order-card__thumbs {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.b2b-order-card__thumb {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
}

.b2b-order-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.b2b-order-card__thumb--more {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-500);
    background: var(--gray-100);
    border: 1px dashed var(--gray-300);
}

/* Tiedot */
.b2b-order-card__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.b2b-order-card__top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.b2b-order-card__number {
    font-family: var(--font);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--navy);
}

.b2b-order-card__status {
    font-family: var(--font);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: var(--pill);
}

.b2b-order-card__status--green  { background: #e8f5e9; color: #2e7d32; }
.b2b-order-card__status--blue   { background: #e3f2fd; color: #1565c0; }
.b2b-order-card__status--yellow { background: #fff8e1; color: #f57f17; }
.b2b-order-card__status--red    { background: #fce4ec; color: #c62828; }
.b2b-order-card__status--navy   { background: rgba(17,57,103,0.08); color: var(--navy); }
.b2b-order-card__status--gray   { background: var(--gray-100); color: var(--gray-600); }

.b2b-order-card__meta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font);
    font-size: 0.8125rem;
    color: var(--gray-500);
}

.b2b-order-card__total { font-weight: 600; color: var(--text); }

.b2b-order-card__sep { opacity: 0.4; }

/* Nuoli */
.b2b-order-card__arrow {
    flex-shrink: 0;
    color: var(--gray-300);
    transition: color 0.15s var(--ease), transform 0.15s var(--ease);
}

.b2b-order-card:hover .b2b-order-card__arrow {
    color: var(--navy);
    transform: translateX(2px);
}

/* Tyhjä tila */
.b2b-orders-empty {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
}

.b2b-orders-empty svg {
    color: var(--gray-300);
    margin-bottom: 1rem;
}

.b2b-orders-empty p {
    font-family: var(--font);
    font-size: 1rem;
    color: var(--gray-500);
    margin: 0 0 1.5rem;
}

.b2b-orders-empty__btn {
    display: inline-flex;
    padding: 0.75rem 2rem;
    font-family: var(--font);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--white);
    background: var(--orange);
    border-radius: var(--pill);
    text-decoration: none;
    transition: background 0.2s var(--ease);
}

.b2b-orders-empty__btn:hover { background: var(--orange-hover); }

/* Pagination */
.woocommerce-pagination {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}


/* =============================================
   TILAUKSEN TARKASTELU (view-order)
   ============================================= */
.b2b-view-order__back {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-500);
    text-decoration: none;
    margin-bottom: 1.25rem;
    transition: color 0.15s var(--ease);
}

.b2b-view-order__back:hover { color: var(--navy); }
.b2b-view-order__back svg { flex-shrink: 0; }

.b2b-view-order__header {
    margin-bottom: 1.5rem;
}

.b2b-view-order__title {
    font-family: var(--font);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--navy) !important;
    margin: 0 0 4px;
}

.b2b-view-order__meta {
    font-family: var(--font);
    font-size: 0.875rem;
    color: var(--gray-500);
    margin: 0;
}

.b2b-order-notes {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.b2b-order-note {
    background: var(--gray-50);
    border-radius: 10px;
    padding: 0.875rem 1rem;
}

.b2b-order-note__date {
    font-family: var(--font);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-400);
    display: block;
    margin-bottom: 4px;
}

.b2b-order-note__text {
    font-family: var(--font);
    font-size: 0.875rem;
    color: var(--text);
    line-height: 1.5;
}

.b2b-order-note__text p { margin: 0; }


/* =============================================
   KIRJAUTUMISLOMAKE (ei kirjautunut)
   ============================================= */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
    max-width: 440px;
    margin: 0 auto;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-200);
    padding: 2.5rem 2rem;
}

.woocommerce-account .woocommerce-form-login h2,
.woocommerce-account .woocommerce-form-register h2 {
    font-family: var(--font);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--navy);
    text-align: center;
    margin-bottom: 1.5rem;
}

.woocommerce-account .woocommerce-form-login label,
.woocommerce-account .woocommerce-form-register label {
    display: block;
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 0.375rem;
}

.woocommerce-account .woocommerce-form-login input[type="text"],
.woocommerce-account .woocommerce-form-login input[type="email"],
.woocommerce-account .woocommerce-form-login input[type="password"],
.woocommerce-account .woocommerce-form-register input[type="text"],
.woocommerce-account .woocommerce-form-register input[type="email"],
.woocommerce-account .woocommerce-form-register input[type="password"] {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font);
    font-size: 0.9375rem;
    color: var(--text);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.woocommerce-account .woocommerce-form-login input:focus,
.woocommerce-account .woocommerce-form-register input:focus {
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(17, 57, 103, 0.08);
    background: var(--white);
}

.woocommerce-account .woocommerce-form-login button[type="submit"],
.woocommerce-account .woocommerce-form-register button[type="submit"] {
    width: 100%;
    padding: 0.875rem;
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
    background: var(--orange);
    border: none;
    border-radius: var(--pill);
    cursor: pointer;
    transition: background 0.2s var(--ease), transform 0.15s var(--ease);
    margin-top: 0.75rem;
}

.woocommerce-account .woocommerce-form-login button[type="submit"]:hover,
.woocommerce-account .woocommerce-form-register button[type="submit"]:hover {
    background: var(--orange-hover);
    transform: translateY(-1px);
}

.woocommerce-account .woocommerce-LostPassword {
    text-align: center;
    margin-top: 1rem;
}

.woocommerce-account .woocommerce-LostPassword a {
    font-family: var(--font);
    font-size: 0.8125rem;
    color: var(--gray-500);
    text-decoration: none;
}

.woocommerce-account .woocommerce-LostPassword a:hover { color: var(--navy); }

.woocommerce-account .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--gray-600);
    cursor: pointer;
}


/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 767px) {

    /* ── Hero ── */
    .account-hero {
        min-height: 280px;
        margin-top: -80px;
        padding: 100px 0 32px;
    }

    .account-hero__title  { font-size: 1.5rem; }
    .account-hero__subtitle { font-size: 0.8125rem; }

    /* ── Page wrapper ── */
    .b2b-account-page { padding: 1rem 1rem 3rem; }

    /* ── Layout: stacked ── */
    .b2b-account {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* ── Sidebar → vaakasuuntainen tab-nauha ── */
    .b2b-account__sidebar {
        position: relative;
        top: auto;
        border-radius: var(--radius) var(--radius) 0 0;
        box-shadow: none;
        border-bottom: none;
    }

    /* Piilota desktopissa näkyvät osiot */
    .b2b-account__user-card { display: none; }
    .b2b-account__logout    { display: none; }
    .b2b-account__quick     { display: none; }

    /* Nav scroll */
    .b2b-account__nav {
        padding: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .b2b-account__nav::-webkit-scrollbar { display: none; }

    .woocommerce-MyAccount-navigation ul {
        flex-direction: row;
        padding: 0 0.75rem;
    }

    .woocommerce-MyAccount-navigation ul li a {
        white-space: nowrap;
        padding: 0.75rem 0.875rem;
        font-size: 0.8125rem;
        border-left: none;
        border-bottom: 2px solid transparent;
    }

    .woocommerce-MyAccount-navigation ul li a::before {
        width: 16px; height: 16px;
        background-size: 16px 16px;
    }

    /* Mobiilissa active: bottom border, ei background li:llä */
    .woocommerce-MyAccount-navigation ul li.is-active {
        background: none;
    }

    .woocommerce-MyAccount-navigation ul li.is-active a {
        background: transparent;
        border-left-color: transparent;
        border-bottom-color: var(--navy);
    }

    /* ── Dashboard ── */
    .acct-welcome { flex-direction: column; padding: 1.25rem; text-align: center; }
    .acct-welcome__title { font-size: 1.125rem !important; }
    .acct-welcome__desc { font-size: 0.8125rem; }
    .acct-welcome__stats { width: 100%; }
    .acct-stat { flex-direction: row; gap: 0.5rem; padding: 0.625rem; justify-content: center; }
    .acct-stat__num { font-size: 1.25rem; }
    .acct-viewed-list .lc-card { font-size: 0.8125rem; }

    /* ── Tilauskortti ── */
    .b2b-order-card { padding: 0.875rem; gap: 0.75rem; }
    .b2b-order-card__thumbs { gap: 4px; }
    .b2b-order-card__thumb { width: 40px; height: 40px; border-radius: 6px; }
    .b2b-order-card__number { font-size: 0.875rem; }
    .b2b-order-card__meta { font-size: 0.75rem; flex-wrap: wrap; }
    .b2b-order-card__arrow { display: none; }

    /* ── Osoitteet ── */
    .woocommerce-account .woocommerce-Addresses { grid-template-columns: 1fr !important; }

    .woocommerce-account .woocommerce-Address-title {
        padding: 0.75rem 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .woocommerce-account .woocommerce-Address-title h2,
    .woocommerce-account .woocommerce-Address-title h3 { font-size: 0.875rem; }

    .woocommerce-account .woocommerce-Address-title a {
        font-size: 0.75rem;
        padding: 0.2rem 0.625rem;
    }

    .woocommerce-account .woocommerce-Addresses address,
    .woocommerce-account .addresses address {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }

    /* ── Lomakkeet ── */
    .woocommerce-account .woocommerce-EditAccountForm,
    .woocommerce-account .woocommerce-address-fields {
        padding: 1.25rem;
        border-radius: var(--radius);
    }

    /* Stack etunimi/sukunimi mobiilissa */
    .woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row--first,
    .woocommerce-account .woocommerce-EditAccountForm .form-row-first,
    .woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row--last,
    .woocommerce-account .woocommerce-EditAccountForm .form-row-last {
        display: block;
        width: 100%;
        margin-right: 0;
    }

    .woocommerce-account .woocommerce-EditAccountForm fieldset {
        padding: 1rem;
        margin: 1rem 0;
    }

    /* ── View order ── */
    .b2b-view-order__back { font-size: 0.8125rem; }
    .b2b-view-order__title { font-size: 1.0625rem !important; }
    .b2b-view-order__meta { font-size: 0.8125rem; }

    /* ── Tyhjä tilauslista ── */
    .b2b-orders-empty { padding: 2.5rem 1.5rem; }
    .b2b-orders-empty svg { width: 36px; height: 36px; }

    /* ── Vanha taulukko (fallback) ── */
    .woocommerce-orders-table__wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .woocommerce-orders-table { min-width: 560px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .b2b-account {
        grid-template-columns: 220px 1fr;
        gap: 1.5rem;
    }

    .b2b-account__sidebar { top: 110px; }
}