/* ============================================================ skinspecialist.cz / bioby.cz :: ss-account-17.css :: v17 PRODUCTION CSS for Shoptet customer account zone (přihlášený uživatel) v17 (2026-06-01) :: FIX úzký název produktu v kartě objednávky (mobil) — v10 width:30% na 1. sloupci držel název v 30% i v kartách. Přebito. v16 (2026-06-01) :: FIX únik account stylů do HEADERU/FOOTERU na /klient/*. Pravidla body[class*="in-X"] BEZ #content-wrapper (button[type=submit], a, .form-control, form…) trefovala i search tlačítko (sage+min-width:180px) a nav odkazy (barva). Doplněn #content-wrapper => zůstává jen v obsahu. v15 (2026-06-01) :: MOBILNÍ RESPONZIVITA — kolaps mřížky na 1 sloupec (fix: desktop v6 264px přebíjelo media query => vodorovný scroll), boční menu = OFF-CANVAS DRAWER (trigger+backdrop vkládá ss-account-2.js), karta objednávky stack, account tabulky do karet, summary full-width, typografie. Vše na konci souboru. JS: ss-account-1.js -> ss-account-2.js. v14 (2026-06-01) :: FIX oříznutý (ZEMĚ) na "Moje osobní údaje". Náš .form-control dává padding:13px ⊤⊥, ale NEnastavoval height => select zdědil nízkou Bootstrap výšku Shoptetu (~35px). Po paddingu zbylo na text ~7px a , který obsah neořízne) svůj vybraný text OŘÍZL => vidět jen ~20 %. Řešení: height:auto + min-height na všechna account pole (jednotná výška 48px). ============================================================ */ body.customer-page:has(.client-center-box) #content-wrapper select, body.customer-page:has(.client-center-box) #content-wrapper .form-control, body.customer-page:has(.client-center-box) #content-wrapper input[type="text"], body.customer-page:has(.client-center-box) #content-wrapper input[type="email"], body.customer-page:has(.client-center-box) #content-wrapper input[type="tel"], body.customer-page:has(.client-center-box) #content-wrapper input[type="password"], body.customer-page:has(.client-center-box) #content-wrapper input[type="number"]{ height:auto !important; min-height:48px !important; } body.customer-page:has(.client-center-box) #content-wrapper textarea{ height:auto !important; min-height:110px !important; } body.customer-page:has(.client-center-box) #content-wrapper select{ line-height:1.4 !important; } /* ====================================================================== v15 (2026-06-01) :: MOBILNÍ RESPONZIVITA account zóny. Přidáno NA KONEC => vyhrává zdrojovým pořadím nad dřívějšími desktop !important pravidly (hlavně v6 `.content-wrapper-in: 264px`, které blokovalo kolaps mřížky a způsobovalo vodorovný scroll na mobilu). Boční menu = OFF-CANVAS DRAWER (trigger + backdrop vkládá ss-account-2.js). body.customer-page:has(.client-center-box) #content-wrapper =#content-wrapper sc. body.ss-drawer-open.customer-page:has(.client-center-box) #content-wrapper = otevřený drawer body.customer-page:has(.client-center-box) = body sc. ====================================================================== */ /* drawer prvky na desktopu schované (existují jen v account zóně) */ body.customer-page:has(.client-center-box) .ss-acc-drawer-toggle, body.customer-page:has(.client-center-box) .ss-acc-drawer-backdrop, body.customer-page:has(.client-center-box) .ss-acc-drawer-close{ display: none; } /* ============ ≤900px — tablet/mobil ============ */ @media (max-width: 900px){ /* ---- FRAME: 1 sloupec, menší okraje ---- */ /* minmax(0,1fr) NE 1fr — jinak se sloupec nesmrští pod min-content obsahu (dlouhý název produktu / tabulka) a vznikne vodorovný scroll */ body.customer-page:has(.client-center-box) #content-wrapper{ padding: 22px 16px 64px !important; } body.customer-page:has(.client-center-box) #content-wrapper .content-wrapper-in{ grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; } body.customer-page:has(.client-center-box) #content-wrapper #content, body.customer-page:has(.client-center-box) #content-wrapper main#content{ min-width: 0 !important; max-width: 100% !important; overflow-wrap: break-word !important; } /* ---- TRIGGER "Můj účet" nad obsahem ---- */ body.customer-page:has(.client-center-box) #content-wrapper .ss-acc-drawer-toggle{ display: flex !important; align-items: center; gap: 13px; width: 100%; margin: 0 0 20px; padding: 13px 18px; background: #F6F0E7; border: 1px solid rgba(126,98,72,.24); border-radius: 12px; font-family: var(--ss-sans, sans-serif); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ss-terracotta-deep, #7E6248); cursor: pointer; -webkit-tap-highlight-color: transparent; } body.customer-page:has(.client-center-box) #content-wrapper .ss-acc-drawer-toggle__icon{ position: relative; width: 20px; height: 2px; background: currentColor; margin: 7px 0; flex: 0 0 auto; border-radius: 2px; } body.customer-page:has(.client-center-box) #content-wrapper .ss-acc-drawer-toggle__icon::before, body.customer-page:has(.client-center-box) #content-wrapper .ss-acc-drawer-toggle__icon::after{ content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; border-radius: 2px; } body.customer-page:has(.client-center-box) #content-wrapper .ss-acc-drawer-toggle__icon::before{ top: -7px; } body.customer-page:has(.client-center-box) #content-wrapper .ss-acc-drawer-toggle__icon::after{ top: 7px; } body.customer-page:has(.client-center-box) #content-wrapper .ss-acc-drawer-toggle__label{ line-height: 1; } /* ---- ASIDE -> off-canvas panel ---- (jen když JS přidal .ss-drawer-ready; bez JS zůstane sidebar normální stacknutá karta = přístupný fallback) */ body.ss-drawer-ready.customer-page:has(.client-center-box) #content-wrapper aside.sidebar-left{ position: fixed !important; top: 0 !important; left: 0 !important; right: auto !important; width: min(86vw, 360px) !important; max-width: 360px !important; height: 100vh !important; height: 100dvh !important; margin: 0 !important; padding: 0 !important; transform: translateX(-100%); transition: transform .34s cubic-bezier(.4,0,.2,1); z-index: 9999 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; background: #F6F0E7 !important; box-shadow: 0 0 44px rgba(15,15,15,.28); border: 0 !important; border-radius: 0 !important; } body.ss-drawer-ready.customer-page:has(.client-center-box) #content-wrapper .sidebar-inner{ padding: 0 !important; height: auto !important; position: static !important; } body.ss-drawer-ready.customer-page:has(.client-center-box) #content-wrapper .client-center-box{ border: 0 !important; border-radius: 0 !important; margin: 0 !important; min-height: 100% !important; box-shadow: none !important; background: #F6F0E7 !important; } body.ss-drawer-ready.customer-page:has(.client-center-box) #content-wrapper .client-center-box ul{ padding-top: 8px !important; } /* zavírací X v draweru */ body.customer-page:has(.client-center-box) #content-wrapper .ss-acc-drawer-close{ display: flex !important; align-items: center; justify-content: center; position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; padding: 0; z-index: 5; background: rgba(255,255,255,.72); border: 1px solid rgba(126,98,72,.22); border-radius: 50%; font-size: 22px; line-height: 1; color: var(--ss-terracotta-deep, #7E6248); cursor: pointer; } /* otevřený stav: vysunout + backdrop */ body.ss-drawer-open.customer-page:has(.client-center-box) #content-wrapper aside.sidebar-left{ transform: translateX(0) !important; } body.customer-page:has(.client-center-box) .ss-acc-drawer-backdrop{ display: block !important; position: fixed; inset: 0; background: rgba(15,15,15,.46); z-index: 9998; opacity: 0; pointer-events: none; transition: opacity .34s ease; } body.ss-drawer-open.customer-page:has(.client-center-box) .ss-acc-drawer-backdrop{ opacity: 1; pointer-events: auto; } body.ss-drawer-open.customer-page:has(.client-center-box){ overflow: hidden; } /* ---- ORDER: hlavička objednávky stack, button full-width ---- */ body[class*="in-objednavk"].customer-page:has(.client-center-box) #content-wrapper .content-inner > h2:first-of-type + div{ flex-direction: column !important; align-items: stretch !important; padding: 18px !important; gap: 13px !important; } body[class*="in-objednavk"].customer-page:has(.client-center-box) #content-wrapper .content-inner > h2:first-of-type + div p:first-child{ min-width: 0 !important; } body[class*="in-objednavk"].customer-page:has(.client-center-box) #content-wrapper .content-inner > h2:first-of-type + div .btn{ width: 100% !important; justify-content: center !important; text-align: center !important; } /* ---- SUMMARY box full-width (fix max-width:360 přetok) ---- */ body.customer-page:has(.client-center-box) #content-wrapper .list-summary, body[class*="in-objednavk"].customer-page:has(.client-center-box) #content-wrapper .row-summary .list-summary{ max-width: 100% !important; margin-left: 0 !important; width: 100% !important; } body[class*="in-objednavk"].customer-page:has(.client-center-box) #content-wrapper .row-summary dd{ white-space: nowrap !important; } /* ---- shipping-addresses tabulka ať nepřetéká ---- */ body.customer-page:has(.client-center-box) #content-wrapper .table-shipping-addresses{ display: block !important; width: 100% !important; min-width: 0 !important; overflow-x: auto !important; } /* ---- TYPOGRAFIE ---- */ body.customer-page:has(.client-center-box) h1{ font-size: clamp(26px, 7vw, 34px) !important; line-height: 1.08 !important; } } /* ============ ≤719px — telefon: VŠECHNY account tabulky do karet ============ */ /* (vč. detailu objednávky — přebíjí rozbitý v11 card-mode, kde se uppercase tracked labely lámaly po písmenech a kolidovaly s hodnotami) */ @media (max-width: 719px){ body.customer-page:has(.client-center-box) #content-wrapper .table-mobile-enriched{ display: block !important; background: #fff !important; border: 1px solid var(--ss-border, rgba(15,15,15,.10)) !important; border-radius: 14px !important; overflow: hidden !important; width: 100% !important; margin: 0 !important; } body.customer-page:has(.client-center-box) #content-wrapper .table-mobile-enriched thead{ display: none !important; } body.customer-page:has(.client-center-box) #content-wrapper .table-mobile-enriched tbody, body.customer-page:has(.client-center-box) #content-wrapper .table-mobile-enriched tbody tr{ display: block !important; } body.customer-page:has(.client-center-box) #content-wrapper .table-mobile-enriched tbody tr{ border-bottom: 1px solid rgba(15,15,15,.12) !important; padding: 6px 0 10px !important; } body.customer-page:has(.client-center-box) #content-wrapper .table-mobile-enriched tbody tr:last-child{ border-bottom: 0 !important; } /* běžná buňka = "label : hodnota" (label roste -> všechny stejný levý okraj) */ body.customer-page:has(.client-center-box) #content-wrapper .table-mobile-enriched tbody td{ display: flex !important; gap: 14px !important; align-items: baseline !important; padding: 7px 18px !important; border: 0 !important; text-align: right !important; font-size: 13.5px !important; min-width: 0 !important; width: auto !important; flex: none !important; } body.customer-page:has(.client-center-box) #content-wrapper .table-mobile-enriched .client-table-heading{ display: inline-block !important; flex: 1 1 auto !important; text-align: left !important; color: var(--ss-muted, rgba(15,15,15,.62)) !important; font-size: 12px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; white-space: normal !important; word-break: normal !important; line-height: 1.3 !important; } body.customer-page:has(.client-center-box) #content-wrapper .table-mobile-enriched tbody td .p-name__code, body.customer-page:has(.client-center-box) #content-wrapper .table-mobile-enriched tbody td .p-name__codeLabel{ letter-spacing: 0 !important; } /* první buňka (název produktu) = přes celou šířku, BEZ labelu */ body.customer-page:has(.client-center-box) #content-wrapper .table-mobile-enriched tbody td.p-name{ display: block !important; text-align: left !important; padding: 13px 18px 9px !important; } body.customer-page:has(.client-center-box) #content-wrapper .table-mobile-enriched tbody td.p-name .client-table-heading{ display: none !important; } body.customer-page:has(.client-center-box) #content-wrapper .table-mobile-enriched tbody td.p-name .p-name__itemLink{ display: block !important; margin-bottom: 4px !important; } /* souhrnný řádek NEdělat label:value (má vlastní .list-summary grid) */ body.customer-page:has(.client-center-box) #content-wrapper .table-mobile-enriched tbody tr.row-summary{ padding: 0 !important; border-bottom: 0 !important; } body.customer-page:has(.client-center-box) #content-wrapper .table-mobile-enriched tbody tr.row-summary td{ display: block !important; flex: none !important; width: auto !important; text-align: left !important; padding: 16px 16px 6px !important; } } /* ============ ≤680px — adresy pod sebe ============ */ /* pozn.: stávající ≤680 to dělá, ale pozdější nemédiové v9 pravidlo `[ORD] .row{1fr 1fr}` (oprava diagonál) ho přebíjí zdroj. pořadím. Tady (na konci souboru) vyhrajeme. */ @media (max-width: 680px){ body[class*="in-objednavk"].customer-page:has(.client-center-box) #content-wrapper .row{ grid-template-columns: 1fr !important; gap: 14px !important; } } /* ============ ≤540px — malé telefony: utáhnout ============ */ @media (max-width: 540px){ body.customer-page:has(.client-center-box) #content-wrapper{ padding: 18px 12px 56px !important; } body.customer-page:has(.client-center-box) #content-wrapper h2{ font-size: 19px !important; } body[class*="in-objednavk"].customer-page:has(.client-center-box) #content-wrapper .row > [class*="col-"]{ padding: 16px 16px !important; } body[class*="in-objednavk"].customer-page:has(.client-center-box) #content-wrapper .content-inner > h2:first-of-type + div{ padding: 15px 15px !important; } body.customer-page:has(.client-center-box) #content-wrapper .btn-primary, body.customer-page:has(.client-center-box) #content-wrapper button[type="submit"], body.customer-page:has(.client-center-box) #content-wrapper input[type="submit"], body.customer-page:has(.client-center-box) #content-wrapper .btn.btn-secondary{ width: 100% !important; justify-content: center !important; } } /* ============================================================ v17 (2026-06-01) :: FIX úzký název produktu v kartě objednávky (mobil). v10 dává `.table-order-details td:first-child{ width:30% !important }` (pro desktop tabulku). V kartovém režimu (≤719) to drží název v úzkém 30% sloupci (~139px) => 6 řádků + lámání slov uprostřed. Přebíjíme vyšší specificitou (in-objednavk scope + .table-order-details + tbody + .p-name). ============================================================ */ @media (max-width:719px){ body[class*="in-objednavk"].customer-page:has(.client-center-box) #content-wrapper .table-order-details tbody td.p-name, body[class*="in-objednavk"].customer-page:has(.client-center-box) #content-wrapper .table-order-details tbody td:first-child{ width: auto !important; max-width: none !important; display: block !important; flex: none !important; text-align: left !important; } body[class*="in-objednavk"].customer-page:has(.client-center-box) #content-wrapper .table-order-details tbody td.p-name .p-name__itemLink{ display: block !important; } }