/* ============================================================
   skinspecialist.cz / bioby.cz — ss-account-1.css — v1
   PRODUCTION CSS for Shoptet customer account zone (přihlášený uživatel)

   SCOPE — všechny stránky které vidí přihlášený zákazník:
     /klient/                       (přehled / dashboard)
     /klient/objednavky/            (seznam objednávek)
     /klient/objednavky/{cislo}/    (detail objednávky)
     /klient/zmena-udaju/           (osobní údaje + adresy)
     /klient/zmena-hesla/           (změna hesla)
     /klient/oblibene/              (wishlist, pokud aktivní)
     /klient/recenze/               (moje recenze, pokud aktivní)
     /klient/zapomenute-heslo/      (forgot password)

   APPROACH: CSS-only re-skin Shoptet's native DOM (ne JS replace).
   Shoptet renders customer pages s wrapper `.customer-page` který obsahuje
   `.table`, `.table-order-details`, `.table-shipping-addresses`,
   `.table-mobile-enriched`, `.customer-ratings`, `.customer-discussions`,
   `.password-form`, `.shipping-address-form`, atd.

   DETECTION strategie:
     - `body.in-klient` (Shoptet pravděpodobně set, ale we hedge se taky
       `.customer-page` selector — pokud body class neexistuje, target
       wrappera funguje stejně).
     - All rules scope na: `body.in-klient` OR `.customer-page` ancestor.

   ARCHITECTURE: standardní override pattern (matchuje ss-cart-3 +
   ss-checkout-4) — žádné REPLACE, žádný JS. CSS-only kill blue links +
   sage CTAs + Luxury Rigane headings + cream summary cards.

   DESIGN LANGUAGE (matchuje ss-login-1 + ss-register-1 + ss-cart-3):
     - Sidebar 240px account nav + main content 1fr
     - Italic Rigane page headings ("Moje objednávky.", "Změna údajů.")
     - Cream summary cards (--ss-cream)
     - White content cards (--ss-white) s --ss-border 1px
     - Sage primary CTA (Uložit, Pokračovat)
     - Terracotta links + destructive
     - Container 1500px (matchuje header)
     - Easing literal cubic-bezier(.4, 0, .2, 1)
     - Em dash NIKDY v copy (memory rule)

   DEPLOY:
     1. Upload tento soubor do /user/documents/upload/
     2. V Záhlaví HTML kódy přidat:
        <link rel="stylesheet" href="/user/documents/upload/ss-account-1.css?v=1">
     3. Hard reload, ověřit na všech stránkách /klient/*
   ============================================================ */


/* ============================================================
   1. PAGE BG + KILL BREADCRUMBS
   ============================================================ */

body.in-klient,
body.in-c-klient,
body[class*="in-klient"],
body[class*="in-zmena-udaju"],
body[class*="in-zmena-hesla"],
body[class*="in-objednavk"],
body[class*="in-oblib"],
body[class*="in-recenz"],
body[class*="in-zapomenute"] {
  background: var(--ss-canvas, #F2EBDB) !important;
}

body.in-klient .breadcrumbs-wrapper,
body[class*="in-klient"] .breadcrumbs-wrapper,
body[class*="in-zmena-udaju"] .breadcrumbs-wrapper,
body[class*="in-zmena-hesla"] .breadcrumbs-wrapper,
body[class*="in-objednavk"] .breadcrumbs-wrapper,
body[class*="in-oblib"] .breadcrumbs-wrapper,
body[class*="in-recenz"] .breadcrumbs-wrapper,
body[class*="in-zapomenute"] .breadcrumbs-wrapper {
  display: none !important;
}

/* Page wrapper background — match canvas */
body.in-klient #content-wrapper,
body[class*="in-klient"] #content-wrapper,
body[class*="in-zmena-"] #content-wrapper,
body[class*="in-objednavk"] #content-wrapper,
body[class*="in-oblib"] #content-wrapper,
body[class*="in-recenz"] #content-wrapper,
body[class*="in-zapomenute"] #content-wrapper,
body.in-klient .content-inner,
body[class*="in-klient"] .content-inner,
body[class*="in-zmena-"] .content-inner,
body[class*="in-objednavk"] .content-inner,
body[class*="in-oblib"] .content-inner,
body[class*="in-recenz"] .content-inner,
body[class*="in-zapomenute"] .content-inner {
  background: var(--ss-canvas, #F2EBDB) !important;
}


/* ============================================================
   2. CONTENT CONTAINER — 1500px max, matchuje header
   ============================================================ */

body.in-klient #content.content,
body[class*="in-klient"] #content.content,
body[class*="in-zmena-"] #content.content,
body[class*="in-objednavk"] #content.content,
body[class*="in-oblib"] #content.content,
body[class*="in-recenz"] #content.content,
body[class*="in-zapomenute"] #content.content,
.customer-page {
  max-width: 1500px;
  margin: 0 auto;
  padding: 32px 32px 80px;
  background: transparent;
  font-family: var(--ss-sans, 'Manrope', sans-serif);
  color: var(--ss-black, #0F0F0F);
}


/* ============================================================
   3. PAGE HEADING (H1) — italic Rigane editorial style
   ============================================================ */

body.in-klient h1,
body[class*="in-klient"] h1,
body[class*="in-zmena-"] h1,
body[class*="in-objednavk"] h1,
body[class*="in-oblib"] h1,
body[class*="in-recenz"] h1,
body[class*="in-zapomenute"] h1,
.customer-page h1 {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  font-size: clamp(36px, 3.8vw, 48px) !important;
  letter-spacing: -.025em !important;
  line-height: 1 !important;
  margin: 0 0 28px !important;
  color: var(--ss-black, #0F0F0F) !important;
  text-transform: none !important;
}

/* H2/H3 in customer pages — smaller serif headings */
body.in-klient h2,
body[class*="in-klient"] h2,
body[class*="in-zmena-"] h2,
body[class*="in-objednavk"] h2,
body[class*="in-oblib"] h2,
body[class*="in-recenz"] h2,
.customer-page h2,
.customer-page h3,
.customer-page h4 {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  letter-spacing: -.02em !important;
  color: var(--ss-black, #0F0F0F) !important;
  text-transform: none !important;
}
.customer-page h2 { font-size: 22px !important; margin: 0 0 16px !important; }
.customer-page h3 { font-size: 18px !important; margin: 0 0 12px !important; }
.customer-page h4 { font-size: 16px !important; margin: 0 0 10px !important; }


/* ============================================================
   4. ACCOUNT NAV SIDEBAR — 2-col layout (240px sidebar + 1fr content)
   Shoptet typically renders sub-navigation as a list .menu, .submenu,
   .sec-navigation, or .customer-nav within .content. We restyle.
   ============================================================ */

/* Sidebar — common Shoptet patterns for customer side-nav */
.customer-page .submenu,
.customer-page .side-navigation,
.customer-page .sec-navigation,
.customer-page .customer-nav,
.customer-page .account-nav,
body[class*="in-klient"] .submenu,
body[class*="in-klient"] .side-navigation,
body[class*="in-klient"] .sec-navigation {
  list-style: none !important;
  margin: 0 !important;
  padding: 18px 0 !important;
  background: var(--ss-white, #FFFFFF);
  border: 1px solid var(--ss-border, rgba(15, 15, 15, .10));
  border-radius: 4px;
}
.customer-page .submenu li,
.customer-page .side-navigation li,
.customer-page .sec-navigation li,
.customer-page .customer-nav li {
  list-style: none !important;
  padding: 0;
  margin: 0;
}
.customer-page .submenu a,
.customer-page .side-navigation a,
.customer-page .sec-navigation a,
.customer-page .customer-nav a {
  display: block;
  padding: 11px 22px;
  font-family: var(--ss-sans, sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--ss-muted, rgba(15, 15, 15, .62)) !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-left: 2px solid transparent;
  transition: background .25s cubic-bezier(.4, 0, .2, 1),
              color .25s cubic-bezier(.4, 0, .2, 1),
              border-color .25s cubic-bezier(.4, 0, .2, 1);
}
.customer-page .submenu a:hover,
.customer-page .side-navigation a:hover,
.customer-page .sec-navigation a:hover,
.customer-page .customer-nav a:hover {
  color: var(--ss-black, #0F0F0F) !important;
  background: rgba(107, 139, 133, .06);
  border-left-color: var(--ss-sage, #6B8B85);
}
.customer-page .submenu .active a,
.customer-page .submenu a.active,
.customer-page .submenu .current a,
.customer-page .sec-navigation .active a,
.customer-page .sec-navigation a.active,
.customer-page .customer-nav .active a,
.customer-page .customer-nav a.active {
  color: var(--ss-black, #0F0F0F) !important;
  background: var(--ss-cream, #E8DDC8);
  border-left-color: var(--ss-sage-deep, #5A7E78);
  font-weight: 600 !important;
}


/* ============================================================
   5. CONTENT CARDS — white surfaces for forms, tables, sections
   ============================================================ */

.customer-page .box,
.customer-page .co-box,
.customer-page .info-box,
.customer-page .order-info,
.customer-page .customer-info,
.customer-page .billing-info,
.customer-page .shipping-info,
body[class*="in-klient"] form.password-form,
body[class*="in-klient"] form.shipping-address-form,
body[class*="in-zmena-"] form,
body[class*="in-zapomenute"] form {
  background: var(--ss-white, #FFFFFF);
  border: 1px solid var(--ss-border, rgba(15, 15, 15, .10));
  border-radius: 4px;
  padding: 28px 28px 24px;
  margin: 0 0 20px;
  box-shadow: 0 2px 8px rgba(15, 15, 15, .03);
}

/* Box heading inside card */
.customer-page .box h2,
.customer-page .box h3,
.customer-page .box h4,
.customer-page .co-box h2,
.customer-page .co-box h3,
.customer-page .co-box h4 {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}

/* Kill Shoptet's icon::before on shipping/billing headings (font-shoptet glyphs) */
.customer-page .co-box.co-shipping-address h2::before,
.customer-page .co-box.co-shipping-address h4::before,
.customer-page .co-box.co-billing-address h2::before,
.customer-page .co-box.co-billing-address h4::before {
  content: none !important;
  display: none !important;
}


/* ============================================================
   6. FORMS — match ss-login-1 + ss-register-1 styling
   ============================================================ */

.customer-page .form-group,
body[class*="in-klient"] form .form-group,
body[class*="in-zmena-"] form .form-group,
body[class*="in-zapomenute"] form .form-group {
  position: static !important;
  margin-bottom: 14px;
  min-width: 0 !important;
}

/* Labels — uppercase tracked above inputs (matches register page) */
.customer-page label,
body[class*="in-klient"] form label,
body[class*="in-zmena-"] form label,
body[class*="in-zapomenute"] form label {
  display: block;
  font-family: var(--ss-sans, sans-serif) !important;
  font-size: 10.5px !important;
  letter-spacing: .3em !important;
  text-transform: uppercase !important;
  color: var(--ss-muted, rgba(15, 15, 15, .62)) !important;
  margin-bottom: 8px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

/* Required asterisk inline + nowrap (matches ss-register-1.css) */
.customer-page label .required-asterisk,
body[class*="in-klient"] label .required-asterisk,
body[class*="in-zmena-"] label .required-asterisk {
  display: inline !important;
  white-space: nowrap;
}
.customer-page label .required-asterisk::after,
body[class*="in-klient"] label .required-asterisk::after,
body[class*="in-zmena-"] label .required-asterisk::after {
  content: ' *';
  color: var(--ss-terracotta, #9A7A5F);
  display: inline !important;
}

/* Inputs */
.customer-page .form-control,
.customer-page input[type="text"],
.customer-page input[type="email"],
.customer-page input[type="tel"],
.customer-page input[type="password"],
.customer-page input[type="number"],
.customer-page select,
.customer-page textarea,
body[class*="in-klient"] .form-control,
body[class*="in-zmena-"] .form-control,
body[class*="in-zapomenute"] .form-control {
  width: 100%;
  padding: 13px 16px;
  font-family: var(--ss-sans, sans-serif) !important;
  font-size: 14px;
  background: var(--ss-white, #FFFFFF);
  border: 1px solid var(--ss-border, rgba(15, 15, 15, .14)) !important;
  border-radius: 4px;
  outline: 0;
  color: var(--ss-black, #0F0F0F);
  transition: border-color .25s cubic-bezier(.4, 0, .2, 1);
  -webkit-appearance: none;
  appearance: none;
  line-height: 1.4;
}
.customer-page select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F0F0F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
}

.customer-page .form-control:focus,
.customer-page input:focus,
.customer-page select:focus,
.customer-page textarea:focus,
body[class*="in-klient"] .form-control:focus,
body[class*="in-zmena-"] .form-control:focus,
body[class*="in-zapomenute"] .form-control:focus {
  border-color: var(--ss-sage, #6B8B85) !important;
}

/* Smart label wrapper — neutralize Shoptet floating label */
.customer-page .smart-label-wrapper,
body[class*="in-klient"] .smart-label-wrapper,
body[class*="in-zmena-"] .smart-label-wrapper {
  position: static !important;
}

/* Checkbox / radio rows — kill default Shoptet styling */
.customer-page .checkbox-styled,
.customer-page .radio-styled {
  font-family: var(--ss-sans, sans-serif) !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ss-black, #0F0F0F) !important;
  font-weight: 400 !important;
  line-height: 1.5;
}


/* ============================================================
   7. BUTTONS — primary sage CTA, secondary ghost, destructive terracotta
   ============================================================ */

/* Primary CTA — sage filled */
.customer-page button[type="submit"],
.customer-page input[type="submit"],
.customer-page .btn-primary,
.customer-page .btn-secondary.btn-text,
.customer-page .btn.btn-secondary,
.customer-page .submit-wrapper button,
body[class*="in-klient"] button[type="submit"],
body[class*="in-klient"] input[type="submit"],
body[class*="in-zmena-"] button[type="submit"],
body[class*="in-zmena-"] input[type="submit"],
body[class*="in-zapomenute"] button[type="submit"],
body[class*="in-zapomenute"] input[type="submit"] {
  padding: 14px 24px !important;
  background: var(--ss-sage, #6B8B85) !important;
  color: var(--ss-white, #FFFFFF) !important;
  border: 0 !important;
  border-radius: 4px !important;
  font-family: var(--ss-sans, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 180px;
  transition: background-color .25s cubic-bezier(.4, 0, .2, 1);
  -webkit-appearance: none;
  appearance: none;
}
.customer-page button[type="submit"]:hover,
.customer-page input[type="submit"]:hover,
.customer-page .btn-primary:hover,
.customer-page .btn-secondary.btn-text:hover,
.customer-page .btn.btn-secondary:hover,
body[class*="in-klient"] button[type="submit"]:hover,
body[class*="in-zmena-"] button[type="submit"]:hover,
body[class*="in-zapomenute"] button[type="submit"]:hover {
  background: var(--ss-sage-deep, #5A7E78) !important;
}

/* Secondary / ghost button — outlined */
.customer-page .btn-plain,
.customer-page .btn-default,
.customer-page .btn.btn-action {
  padding: 12px 22px !important;
  background: transparent !important;
  color: var(--ss-black, #0F0F0F) !important;
  border: 1px solid var(--ss-border, rgba(15, 15, 15, .14)) !important;
  border-radius: 4px !important;
  font-family: var(--ss-sans, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: border-color .25s cubic-bezier(.4, 0, .2, 1),
              background .25s cubic-bezier(.4, 0, .2, 1);
}
.customer-page .btn-plain:hover,
.customer-page .btn-default:hover,
.customer-page .btn.btn-action:hover {
  border-color: var(--ss-sage, #6B8B85) !important;
  background: rgba(107, 139, 133, .06) !important;
}

/* Destructive — terracotta (delete address, smazat účet etc) */
.customer-page .btn-danger,
.customer-page .btn-delete,
.customer-page button.delete-address,
.customer-page a.delete-action,
.customer-page .btn[data-action*="delete"],
.customer-page .btn[data-action*="remove"] {
  background: transparent !important;
  color: var(--ss-terracotta-deep, #7E6248) !important;
  border: 1px solid var(--ss-terracotta, #9A7A5F) !important;
}
.customer-page .btn-danger:hover,
.customer-page .btn-delete:hover,
.customer-page button.delete-address:hover {
  background: var(--ss-terracotta, #9A7A5F) !important;
  color: var(--ss-white, #FFFFFF) !important;
  border-color: var(--ss-terracotta, #9A7A5F) !important;
}


/* ============================================================
   8. TABLES — order list, order detail, shipping addresses
   Shoptet uses .table .table-mobile-enriched .table-order-details
   .table-shipping-addresses, .customer-discussions, .customer-ratings
   ============================================================ */

.customer-page .table,
.customer-page table.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--ss-white, #FFFFFF);
  border: 1px solid var(--ss-border, rgba(15, 15, 15, .10));
  border-radius: 4px;
  overflow: hidden;
  font-family: var(--ss-sans, sans-serif);
  margin: 0 0 24px;
}

.customer-page .table thead {
  background: var(--ss-cream, #E8DDC8);
  position: relative !important;
  top: auto !important;
}
.customer-page .table thead th {
  padding: 14px 16px !important;
  text-align: left !important;
  font-family: var(--ss-sans, sans-serif) !important;
  font-size: 10.5px !important;
  letter-spacing: .25em !important;
  text-transform: uppercase !important;
  color: var(--ss-sage-deep, #5A7E78) !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--ss-border, rgba(15, 15, 15, .10)) !important;
  line-height: 1.4;
}

.customer-page .table tbody tr {
  border-bottom: 1px solid var(--ss-border, rgba(15, 15, 15, .10));
  transition: background .25s cubic-bezier(.4, 0, .2, 1);
}
.customer-page .table tbody tr:hover {
  background: rgba(232, 221, 200, .25); /* cream tint hover */
}
.customer-page .table tbody tr:last-child {
  border-bottom: 0;
}
.customer-page .table tbody td {
  padding: 16px !important;
  font-family: var(--ss-sans, sans-serif) !important;
  font-size: 13.5px !important;
  color: var(--ss-black, #0F0F0F) !important;
  line-height: 1.5 !important;
  vertical-align: middle !important;
  border: 0;
  background: transparent !important;
}

/* Number/code cells — italic Rigane (Shoptet renders order # in code column) */
.customer-page .table .cell--code,
.customer-page .table .table-th-code,
.customer-page .table td.cell--code,
.customer-page .table tbody td:first-child {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: 17px !important;
  letter-spacing: -.01em !important;
  color: var(--ss-black, #0F0F0F) !important;
}
.customer-page .table .cell--code a,
.customer-page .table tbody td:first-child a {
  color: var(--ss-black, #0F0F0F) !important;
  text-decoration: none !important;
  border-bottom: 1px solid currentColor;
  font-family: inherit !important;
  font-style: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  padding-bottom: 1px;
  transition: color .25s cubic-bezier(.4, 0, .2, 1);
}
.customer-page .table .cell--code a:hover,
.customer-page .table tbody td:first-child a:hover {
  color: var(--ss-sage-deep, #5A7E78) !important;
}

/* Price cell — right-align */
.customer-page .table .cell--price {
  text-align: right !important;
  white-space: nowrap !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}

/* Actions cell */
.customer-page .table .cell--actions {
  text-align: right !important;
  white-space: nowrap;
}
.customer-page .table .cell--actions .btn.btn-plain {
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--ss-terracotta-deep, #7E6248) !important;
  text-decoration: none !important;
  font-size: 12.5px !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  border-bottom: 1px solid currentColor !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  padding-bottom: 1px !important;
}
.customer-page .table .cell--actions .btn.btn-plain:hover {
  color: var(--ss-terracotta, #9A7A5F) !important;
  background: transparent !important;
}

/* Tracking link in order list */
.customer-page .table .tracking-link {
  display: block;
  max-width: 17ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ss-terracotta-deep, #7E6248) !important;
  text-decoration: none !important;
  border-bottom: 1px solid currentColor;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding-bottom: 1px;
}


/* ============================================================
   9. ORDER STATUS BADGES — sage for completed, terracotta for pending
   Shoptet typically uses .status, .status-* classes.
   ============================================================ */

.customer-page .status,
.customer-page .order-status,
.customer-page [class*="status-"],
.customer-page .cell--status {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--ss-sans, sans-serif) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  line-height: 1.4;
  white-space: nowrap;
}

/* Default (pending) — muted */
.customer-page .status,
.customer-page .order-status,
.customer-page .cell--status {
  background: rgba(15, 15, 15, .06);
  color: var(--ss-muted, rgba(15, 15, 15, .62));
}

/* Active / processing — sage tint */
.customer-page .status-active,
.customer-page .status-processing,
.customer-page [class*="status-"][class*="processing"],
.customer-page [class*="status-"][class*="zpracovava"],
.customer-page [class*="status-"][class*="prijata"] {
  background: rgba(107, 139, 133, .15) !important;
  color: var(--ss-sage-deep, #5A7E78) !important;
}

/* Completed / shipped — sage filled */
.customer-page .status-completed,
.customer-page .status-shipped,
.customer-page .status-delivered,
.customer-page [class*="status-"][class*="vyrizena"],
.customer-page [class*="status-"][class*="dorucena"],
.customer-page [class*="status-"][class*="dokoncena"] {
  background: var(--ss-sage, #6B8B85) !important;
  color: var(--ss-white, #FFFFFF) !important;
}

/* Cancelled — terracotta tint */
.customer-page .status-cancelled,
.customer-page .status-canceled,
.customer-page [class*="status-"][class*="storno"],
.customer-page [class*="status-"][class*="zrusena"] {
  background: rgba(154, 122, 95, .12) !important;
  color: var(--ss-terracotta-deep, #7E6248) !important;
}


/* ============================================================
   10. ORDER DETAIL PAGE — receipt-style layout
   - .table-order-details (items)
   - .row-summary dl (key/value pairs — date, total, status)
   - .order-recapitulation (totals box)
   - .co-billing-address + .co-shipping-address (address boxes)
   ============================================================ */

.customer-page .table-order-details {
  background: var(--ss-white, #FFFFFF);
  border: 1px solid var(--ss-border, rgba(15, 15, 15, .10));
}

.customer-page .table-order-details .p-name__itemLink,
.customer-page .table-order-details .p-name__itemName {
  display: block !important;
  width: 100% !important;
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif) !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  letter-spacing: -.01em !important;
  line-height: 1.3 !important;
  color: var(--ss-black, #0F0F0F) !important;
  text-decoration: none !important;
  text-transform: none !important;
}
.customer-page .table-order-details .p-name__itemLink:hover {
  color: var(--ss-sage-deep, #5A7E78) !important;
}
.customer-page .table-order-details .p-name__codeLabel,
.customer-page .table-order-details .p-name__code {
  font-family: var(--ss-sans, sans-serif) !important;
  font-size: 11.5px !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: var(--ss-muted, rgba(15, 15, 15, .62)) !important;
  font-weight: 500 !important;
  margin-top: 4px;
  display: inline-block;
}

/* Row summary — key/value pairs (Datum, Stav, Celkem etc) */
.customer-page .table-order-details .row-summary dl,
.customer-page .row-summary dl {
  display: grid;
  gap: 6px 14px;
  grid-template-columns: auto 1fr;
  margin: 10px 0;
  width: 100%;
}
.customer-page .table-order-details .row-summary dt,
.customer-page .row-summary dt {
  font-family: var(--ss-sans, sans-serif) !important;
  font-size: 10.5px !important;
  letter-spacing: .25em !important;
  text-transform: uppercase !important;
  color: var(--ss-muted, rgba(15, 15, 15, .62)) !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
.customer-page .table-order-details .row-summary dd,
.customer-page .row-summary dd {
  margin: 0 !important;
  font-family: var(--ss-sans, sans-serif) !important;
  font-size: 14px !important;
  color: var(--ss-black, #0F0F0F) !important;
  font-weight: 500 !important;
}

/* Order recapitulation — final total box (cream summary card pattern) */
.customer-page .order-recapitulation {
  background: var(--ss-cream, #E8DDC8) !important;
  border: 0 !important;
  border-radius: 4px !important;
  padding: 24px 28px !important;
  margin: 0 0 24px !important;
  font-family: var(--ss-sans, sans-serif) !important;
}
.customer-page .order-recapitulation::before {
  content: 'Souhrn objednávky.';
  display: block;
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
  font-weight: 300;
  font-style: italic;
  font-size: 22px;
  letter-spacing: -.02em;
  color: var(--ss-black, #0F0F0F);
  margin: 0 0 18px;
}
.customer-page .order-recapitulation strong,
.customer-page .recapitulation-single strong {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif) !important;
  font-weight: 300 !important;
  font-size: 22px !important;
  color: var(--ss-black, #0F0F0F) !important;
  letter-spacing: -.015em !important;
}
.customer-page .order-recapitulation strong span,
.customer-page .recapitulation-single strong span {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif) !important;
  font-weight: 300 !important;
}

/* Address boxes — billing + shipping side-by-side cards */
.customer-page .co-billing-address,
.customer-page .co-shipping-address,
.customer-page .co-box.co-billing-address,
.customer-page .co-box.co-shipping-address {
  background: var(--ss-white, #FFFFFF);
  border: 1px solid var(--ss-border, rgba(15, 15, 15, .10));
  border-radius: 4px;
  padding: 22px 24px;
  margin: 0 0 16px;
}
.customer-page .co-billing-address h2,
.customer-page .co-billing-address h3,
.customer-page .co-billing-address h4,
.customer-page .co-shipping-address h2,
.customer-page .co-shipping-address h3,
.customer-page .co-shipping-address h4 {
  font-family: var(--ss-sans, sans-serif) !important;
  font-style: normal !important;
  font-size: 10.5px !important;
  letter-spacing: .3em !important;
  text-transform: uppercase !important;
  color: var(--ss-sage-deep, #5A7E78) !important;
  font-weight: 600 !important;
  margin: 0 0 12px !important;
}
.customer-page .co-billing-address p,
.customer-page .co-shipping-address p {
  font-family: var(--ss-sans, sans-serif) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--ss-black, #0F0F0F) !important;
  margin: 0 !important;
}


/* ============================================================
   11. SHIPPING ADDRESSES TABLE (more than one shipping address)
   Used on /klient/zmena-udaju/ when customer has multiple delivery addrs.
   ============================================================ */

.customer-page .shipping-addresses {
  padding-top: 19px;
}
.customer-page .table-shipping-addresses {
  min-width: -moz-max-content;
  min-width: max-content;
}
.customer-page .table-shipping-addresses td:not(:last-child) {
  border-right: 1px solid var(--ss-border, rgba(15, 15, 15, .10)) !important;
}

/* Default shipping address — sage highlight (Shoptet uses success color) */
.customer-page .default-shipping-address {
  color: var(--ss-sage-deep, #5A7E78) !important;
  font-weight: 600;
}
.customer-page .default-shipping-address::before {
  content: '✓ ';
  font-weight: 700;
}


/* ============================================================
   12. CUSTOMER RATINGS + DISCUSSIONS (Moje recenze + Moje dotazy)
   ============================================================ */

.customer-page .customer-ratings,
.customer-page .customer-discussions {
  font-family: var(--ss-sans, sans-serif) !important;
}

.customer-page .customer-ratings .cell--rating .product-rating-wrap,
.customer-page .customer-ratings .stars {
  position: static !important;
}

/* Stars — sage instead of default yellow/gold */
.customer-page .customer-ratings .star,
.customer-page .customer-ratings .star::before {
  position: static !important;
  color: var(--ss-sage, #6B8B85) !important;
}

.customer-page .customer-discussions ul,
.customer-page .customer-ratings ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}


/* ============================================================
   13. MOBILE-ENRICHED TABLE (Shoptet pattern for narrow viewports)
   Tables collapse to label/value cards on mobile.
   ============================================================ */

.customer-page .table-mobile-enriched {
  display: block !important;
  width: 100% !important;
}
.customer-page .table-mobile-enriched tbody {
  display: block !important;
}
.customer-page .table-mobile-enriched thead,
.customer-page .table-mobile-enriched th {
  display: none !important;
}
.customer-page .table-mobile-enriched tr {
  display: block !important;
  padding: 16px 18px !important;
  background: var(--ss-white, #FFFFFF);
  border: 1px solid var(--ss-border, rgba(15, 15, 15, .10)) !important;
  border-radius: 4px;
  margin-bottom: 10px;
}
.customer-page .table-mobile-enriched tr:hover {
  background: var(--ss-white, #FFFFFF) !important;
}
.customer-page .table-mobile-enriched td {
  display: flex !important;
  gap: 0 12px !important;
  padding: 5px 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.customer-page .table-mobile-enriched td:empty {
  display: none !important;
}
.customer-page .table-mobile-enriched td.cell--price {
  text-align: left !important;
  white-space: normal !important;
}
.customer-page .table-mobile-enriched .client-table-heading {
  display: block !important;
  flex-shrink: 0;
  width: clamp(min(22ch, 45%), 40%, 200px);
  font-family: var(--ss-sans, sans-serif) !important;
  font-size: 10.5px !important;
  letter-spacing: .25em !important;
  text-transform: uppercase !important;
  color: var(--ss-muted, rgba(15, 15, 15, .62)) !important;
  font-weight: 600 !important;
}
.customer-page .table-mobile-enriched .client-table-heading::after {
  content: '';
}


/* ============================================================
   14. KILL BLUE LINKS (Shoptet --color-primary #1076b7)
   ============================================================ */

.customer-page a,
body[class*="in-klient"] a,
body[class*="in-zmena-"] #content a,
body[class*="in-objednavk"] #content a,
body[class*="in-oblib"] #content a,
body[class*="in-recenz"] #content a,
body[class*="in-zapomenute"] #content a {
  color: var(--ss-terracotta-deep, #7E6248);
  text-decoration: none;
  transition: color .25s cubic-bezier(.4, 0, .2, 1);
}
.customer-page a:hover,
body[class*="in-klient"] a:hover,
body[class*="in-zmena-"] #content a:hover,
body[class*="in-objednavk"] #content a:hover {
  color: var(--ss-terracotta, #9A7A5F);
}

/* But not nav sidebar or buttons (they have their own coloring) */
.customer-page .submenu a,
.customer-page .side-navigation a,
.customer-page .sec-navigation a,
.customer-page .customer-nav a,
.customer-page button,
.customer-page .btn,
.customer-page input[type="submit"] {
  color: inherit !important;
}


/* ============================================================
   15. FORM ERROR / SUCCESS MESSAGES
   ============================================================ */

.customer-page .error-block,
.customer-page .form-error,
.customer-page .alert-danger,
body[class*="in-klient"] .error-block,
body[class*="in-klient"] .alert-danger {
  background: rgba(154, 122, 95, .08);
  border: 1px solid rgba(154, 122, 95, .25);
  color: var(--ss-terracotta-deep, #7E6248);
  padding: 12px 16px;
  border-radius: 4px;
  font-family: var(--ss-sans, sans-serif);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 14px;
}
.customer-page .success-block,
.customer-page .alert-success,
body[class*="in-klient"] .success-block,
body[class*="in-klient"] .alert-success {
  background: rgba(107, 139, 133, .12);
  border: 1px solid rgba(107, 139, 133, .35);
  color: var(--ss-sage-deep, #5A7E78);
  padding: 12px 16px;
  border-radius: 4px;
  font-family: var(--ss-sans, sans-serif);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 14px;
}


/* ============================================================
   16. DASHBOARD WELCOME (intro text on /klient/)
   ============================================================ */

.customer-page > p:first-of-type,
body[class*="in-klient"]:not([class*="in-zmena"]):not([class*="in-objedn"]):not([class*="in-oblib"]):not([class*="in-recenz"]):not([class*="in-zapomenute"]) .customer-page > p {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ss-muted, rgba(15, 15, 15, .62));
  margin: 0 0 28px;
  max-width: 600px;
}


/* ============================================================
   17. LAYOUT — sidebar nav + main content (2-col grid)
   Shoptet may already structure as .row > .col-md-3 (nav) + .col-md-9
   (content). Restyle to consistent 240px sidebar + 1fr content.
   ============================================================ */

.customer-page .row,
body[class*="in-klient"] #content .row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  align-items: start;
  margin: 0;
}

.customer-page .row > .col-md-3,
.customer-page .row > .col-sm-3,
body[class*="in-klient"] #content .row > .col-md-3 {
  grid-column: 1;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
}

.customer-page .row > .col-md-9,
.customer-page .row > .col-sm-9,
.customer-page .row > .col-md-12,
body[class*="in-klient"] #content .row > .col-md-9,
body[class*="in-klient"] #content .row > .col-md-12 {
  grid-column: 2;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
}

/* If page has no sidebar (e.g. /klient/zapomenute-heslo/), single column */
.customer-page.no-sidebar,
body[class*="in-zapomenute"] .customer-page {
  max-width: 560px !important;
  margin: 0 auto !important;
}


/* ============================================================
   18. ICON KILLS — Shoptet font-shoptet glyphs that don't fit our brand
   ============================================================ */

.customer-page .co-box.co-shipping-address h2::before,
.customer-page .co-box.co-shipping-address h4::before,
.customer-page .co-box.co-billing-address h2::before,
.customer-page .co-box.co-billing-address h4::before,
.customer-page h2[class*="title"]::before,
.customer-page h3[class*="title"]::before,
.customer-page .box-heading::before,
.customer-page .section-heading::before {
  content: none !important;
  display: none !important;
}


/* ============================================================
   19. WISHLIST (Oblíbené) — grid of product cards if present
   ============================================================ */

body[class*="in-oblib"] .products,
body[class*="in-oblib"] .product-list,
.customer-page .wishlist-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Hide native .product styling if user wishes a fresh-rendered list later;
   for v1 we just let Shoptet's product cards render — they inherit
   homepage card styling via shared CSS. */


/* ============================================================
   20. RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
  .customer-page .row,
  body[class*="in-klient"] #content .row {
    grid-template-columns: 220px 1fr;
    gap: 24px;
  }
}

@media (max-width: 900px) {
  body.in-klient #content.content,
  body[class*="in-klient"] #content.content,
  body[class*="in-zmena-"] #content.content,
  body[class*="in-objednavk"] #content.content,
  body[class*="in-oblib"] #content.content,
  body[class*="in-recenz"] #content.content,
  body[class*="in-zapomenute"] #content.content,
  .customer-page {
    padding: 24px 16px 60px;
  }

  /* Mobile: stack sidebar above content (no accordion JS, just stacked) */
  .customer-page .row,
  body[class*="in-klient"] #content .row {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Sidebar becomes horizontal pill list of tabs on mobile */
  .customer-page .submenu,
  .customer-page .side-navigation,
  .customer-page .sec-navigation,
  .customer-page .customer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px !important;
  }
  .customer-page .submenu li,
  .customer-page .side-navigation li,
  .customer-page .sec-navigation li,
  .customer-page .customer-nav li {
    flex: 0 0 auto;
  }
  .customer-page .submenu a,
  .customer-page .side-navigation a,
  .customer-page .sec-navigation a,
  .customer-page .customer-nav a {
    padding: 8px 14px !important;
    border-radius: 999px;
    border-left: 0 !important;
    border: 1px solid var(--ss-border, rgba(15, 15, 15, .10));
    font-size: 12.5px !important;
  }
  .customer-page .submenu a:hover,
  .customer-page .side-navigation a:hover,
  .customer-page .sec-navigation a:hover,
  .customer-page .customer-nav a:hover {
    border-color: var(--ss-sage, #6B8B85);
  }
  .customer-page .submenu .active a,
  .customer-page .submenu a.active,
  .customer-page .sec-navigation .active a,
  .customer-page .customer-nav .active a,
  .customer-page .customer-nav a.active {
    border-color: var(--ss-sage-deep, #5A7E78) !important;
    background: var(--ss-sage, #6B8B85) !important;
    color: var(--ss-white, #FFFFFF) !important;
  }

  /* Box padding tighter */
  .customer-page .box,
  .customer-page .co-box,
  body[class*="in-klient"] form.password-form,
  body[class*="in-klient"] form.shipping-address-form {
    padding: 20px 18px;
  }

  /* Tables: enforce mobile-enriched card pattern */
  .customer-page .table,
  .customer-page table.table {
    display: block;
    border: 0;
    background: transparent;
  }
  .customer-page .table thead {
    display: none;
  }
  .customer-page .table tbody {
    display: block;
  }
  .customer-page .table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    background: var(--ss-white, #FFFFFF);
    border: 1px solid var(--ss-border, rgba(15, 15, 15, .10));
    border-radius: 4px;
    padding: 14px 18px;
    margin-bottom: 10px;
  }
  .customer-page .table tbody td {
    display: block !important;
    padding: 0 !important;
  }
  .customer-page .table tbody td.cell--price,
  .customer-page .table tbody td.cell--status {
    text-align: right !important;
  }

  /* Button full width */
  .customer-page button[type="submit"],
  .customer-page input[type="submit"],
  .customer-page .btn-primary,
  body[class*="in-klient"] button[type="submit"],
  body[class*="in-zmena-"] button[type="submit"] {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* H1 smaller */
  body.in-klient h1,
  body[class*="in-klient"] h1,
  body[class*="in-zmena-"] h1,
  body[class*="in-objednavk"] h1,
  body[class*="in-oblib"] h1,
  body[class*="in-recenz"] h1,
  body[class*="in-zapomenute"] h1,
  .customer-page h1 {
    font-size: clamp(30px, 8vw, 38px) !important;
    margin-bottom: 20px !important;
  }
}

@media (max-width: 540px) {
  /* Even tighter sidebar pills on phones */
  .customer-page .submenu a,
  .customer-page .side-navigation a,
  .customer-page .sec-navigation a,
  .customer-page .customer-nav a {
    padding: 7px 12px !important;
    font-size: 11.5px !important;
  }

  /* Address boxes stack */
  .customer-page .co-billing-address,
  .customer-page .co-shipping-address {
    padding: 16px;
  }

  /* Order recapitulation tighter */
  .customer-page .order-recapitulation {
    padding: 18px 20px !important;
  }
  .customer-page .order-recapitulation::before {
    font-size: 19px;
  }
  .customer-page .order-recapitulation strong,
  .customer-page .recapitulation-single strong {
    font-size: 18px !important;
  }
}


/* ============================================================
   21. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .customer-page *,
  body[class*="in-klient"] *,
  body[class*="in-zmena-"] *,
  body[class*="in-objednavk"] *,
  body[class*="in-oblib"] *,
  body[class*="in-recenz"] *,
  body[class*="in-zapomenute"] * {
    transition: none !important;
    animation: none !important;
  }
}