/* ==========================================================================
   Lokala Typsnitt (@font-face) - Inga anrop till externa servrar
   - Cal Sans (för rubriker och 'Tre ankor')
   - Open Sans (för brödtext)
   - Roboto Slab (för underrubriker/accent)
   ========================================================================== */

@font-face {
    font-family: 'Cal Sans';
    src: url('../fonts/CalSans-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora';
    src: url('../fonts/Sora-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora';
    src: url('../fonts/Sora-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora';
    src: url('../fonts/Sora-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Public Sans';
    src: url('../fonts/PublicSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Public Sans';
    src: url('../fonts/PublicSans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Public Sans';
    src: url('../fonts/PublicSans-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Public Sans';
    src: url('../fonts/PublicSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Public Sans';
    src: url('../fonts/PublicSans-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Slab';
    src: url('../fonts/RobotoSlab-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   Profilfärger & Variabler
   ========================================================================== */

:root {
    --bg-page: #eaf1fb;
    --bg-surface: #ffffff;
    --bg-subtle: #edf2f9;
    --bg-card: #ffffff;
    
    --text-main: #24292f;
    --text-heading: #0a1e3b;
    --text-muted: #4a5568;
    --text-light: #718096;
    
    /* Vapnets och logotypens färger */
    --brand-blue: #003685;
    --brand-blue-hover: #002254;
    --brand-blue-dark: #0a1e3b;
    --brand-blue-subtle: #e0ecfb;
    
    --brand-gold: #fecd19;
    --brand-gold-hover: #e5b607;
    --brand-gold-subtle: #fef8df;
    --brand-gold-dark: #8c6a00;
    
    --border-color: #dbe4ef;
    --border-light: #edf2f7;
    
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    
    --shadow-subtle: 0 4px 20px -2px rgba(10, 30, 59, 0.07);
    --shadow-card: 0 4px 14px rgba(10, 30, 59, 0.06);
    
    --container-max-width: 1380px;
    --sidebar-width: 264px;
}

/* Reset & Grundläggande */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Sora', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #f1f5fa;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAGLElEQVR4nO3dS29VVRiA4Xetvc9paJsYEBgakibMagJxpgZQICQMWpyAECNiEUotlzbEEOMfKDrhHiwSBSYmBAUZ8AcYlBgdWqLR0GjiQOgFenpO98UBFUrt5Vz22nutne/7Ayu7T0+zT9L1var5lQ3tpDQFL2bsYRN9O39n4OBvqDJoFRs/dzryKLSGnLm7laN3uogLFaJYGT+34CmmR8u8v30tA7vbmaqEKGX+3DAMWbH8Jb669j3a+Gkz43sxY6NFujsf8PnBX1EVUJjHDSKPQkvIpaGNHL6zn8ifJjZ/LL6nmB4rs2tLGyd3v0oliADzuEEYsmrlCgav3OD4pyfTAfa9mPFHRXo6HnCuf5i4olBxjOlf5iDy8FtCvhzaRNfNwyi/AiomNvyD9j1FMFbm3S1tnO9aTzkIiSLMP28Qsvrl5Vz8+jr9JwYoNhXxzR75HPdQ5whnjt0nnFToNHHvbeKjW714TSUiFRMb/tM8G/fsvvVMlAKiGHQauCuXc/Gb6/SdGKCltRm0MvsJno179tgwYSkD3JvZ4T6eygi3pRmUIo5ic8CCmzHuzIuGEWDBtQMXDAALrj24kDCw4NqFCwkCC659uJAQsODaiQsJAAuuvbjQILDg2o0LDQALrv24UCew4LqBC3UAC647uFAjsOC6hQs1AAuue7hQJbDguokLVQALrru4sASw4LqNC4sAC677uLAAsODmAxfmARbc/ODCHGDBzRcuzAIW3Pzhwgyw4OYTF0A/+6f0zgeCa3CywAXQ4w+bONgxwpm++4JraLLC9XSM7tv5B+ePDBOVEFwDk9knV8dMTPqo+EfaCSBO4+6M4Kb2yZ2YKLBv25/oqAIIbuKTFa7vxUw8KtLbMcKlT37BN/2gILhp4o4/KnJoxwinjsxc9DN6IoKbOm7nCGf7nn8bMgosuBngHht+4YquMWDBzQh3zlddI8CCawcuGAAWXHtwIWFgwbULFxIEFlz7cCEhYMG1ExcSABZce3GhQWDBtRsXGgAWXPtxoU5gwXUDF+oAFlx3cKFGYMF1CxdqABZc93ChSmDBdRMXqgAWXHdxYQlgwXUbFxYBFlz3cWEBYMHNBy7MAyy4+cGFOcCCmy9cmAUsuPnDhRlgwc0nLoCensG9OCS4JierK7q60Bpy6d5GDtw6LLiGJivcMNbo03e30nW7By24RiYr3ChWeMUIxY5v2/EDlIoEN+HJbnOCxl8WcfXn19G68PR6oeAmO5muxWiNuHDvLd670Y+fRoVTcNPdnDA4tInu2x/jNZXM3y4U3PTXYuy/1YtXfPpOZbhdKLiZrMUoPn9hNtguFFwbdp4YahcKrg24YKRdKLi24ELi7ULBtQkXEm0XCq5tuJBYu1BwbcSFRNqFgmsrLjTcLhRcm3GhoXah4NqOC3W3CwXXBVyoq10ouK7gQs3tQsF1CRdqahcKrmu4UHW7UHBdxIWq2oWC6youLNkuFFyXcWHRdqHguo4LC7YLBTcPuDBvu1Bw84IL/2sXCm6ecOGFdqHg5g0XnrULBTePuABacPOLC6CD0TI7N7dx7kPBNTWZ4WqF/mD7Wk7vXcfjkuCamMxwlSIqBai//xlvr0xHRHEKeTvBTQXX04rwSYXON9egpyoREYKb9GS5FiMcK7NncxuXD7yGb/pBQXBT35ywtY3Te9cxMRWk0C4U3Gw3J5g8VHCzX4thrl0ouJnjgql2oeBagQsm2oWCaw0uJN0uFFyrcCHJdqHgWocLSbULBddKXEiiXSi41uJCo+1CwbUaFxppFwqu9bhQb7tQcJ3AhXrahYLrDC7U2i4UXKdwoZZ2oeA6hwvVtgsF10lcqKZdKLjO4sJS7ULBdRoXFmsXCq7zuLBQu1Bwc4EL87ULBTc3uDC3XSi4ucKF2e1Cwc0dLvzXLhTcXOIC6DAMWb1qReq43mzcvhRzb5GH3xoymMF1kmC0zK6Ub3GqscmgffDKDfpPDNDSmg6u1jGPJwr0doxw6sj9FHNvGr0s4sLQ23Tf7nmhTmJytFJETyrs2fL0xkFauAD68rXvOP7ZFzS3LkOlhDs56bNv21+cOpoybjHi6k9v0P1DirhaEU0FvLNhTeq4AP8CVfESZDE5dvcAAAAASUVORK5CYII=');
    background-repeat: repeat;
    background-size: 112px 112px;
    color: var(--text-main);
    line-height: 1.68;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--brand-blue);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease, opacity 0.15s ease;
}

a:hover {
    color: var(--brand-blue-hover);
    text-decoration: underline;
}

/* ==========================================================================
   Layout: Trekolumns-layout, gemensamt vitt kort (card-shell), centrerad
   Kolumner: Sidebar (nav) | Innehåll | Ägg-kolumn (lagerstatus)
   ========================================================================== */

.site-container {
    max-width: var(--container-max-width);
    margin: 40px auto;
    padding: 0 24px;
}

.card-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--egg-column-width, 264px);
    gap: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-subtle);
    overflow: hidden;
    align-items: stretch;
}

/* Inre kolumner: vit bakgrund, ingen egen kant — de delar kortets yttre ram */
.site-sidebar,
.main-content,
.egg-column {
    background: var(--bg-surface);
    min-width: 0;
}

.site-sidebar {
    border-right: 1px solid var(--border-color);
}

.main-content {
    padding: 42px 48px;
}

.egg-column {
    background: var(--bg-surface);
    border-left: 1px solid var(--border-color);
    padding: 28px 18px;
    position: sticky;
    top: 30px;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

.site-sidebar {
    padding: 34px 28px;
    position: sticky;
    top: 30px;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
}

/* Ägg-kolumnen */
.egg-inventory-wrapper {
    /* tar emot markup från js/main.js */
}

.inventory-heading {
    font-family: 'Cal Sans', sans-serif;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--brand-blue-dark);
    margin: 0 0 14px 0;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--brand-gold);
    display: flex;
    align-items: center;
    gap: 8px;
}

.inventory-heading i {
    color: var(--brand-gold-dark);
}

/* Staplade kort: vertikal stapel istället för rutnät */
.inventory-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sidebar-brand {
    text-align: center;
    padding-bottom: 22px;
    border-bottom: 3px solid var(--brand-gold); /* Horisontell guldkant */
    margin-bottom: 22px;
}

.sidebar-brand a {
    text-decoration: none;
    color: inherit;
    display: inline-block;
}

.brand-logo {
    width: 76px;
    height: auto;
    margin: 0 auto 12px auto;
}

/* "Tre ankor" under logotypen i Cal Sans */
.brand-title {
    font-family: 'Cal Sans', sans-serif;
    font-size: 1.85rem;
    font-weight: 600;
    color: var(--text-heading);
    letter-spacing: -0.01em;
    margin-bottom: 4px;
    line-height: 1.2;
}

.brand-tagline {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.4;
    font-weight: 500;
}

/* Navigation */
.sidebar-nav {
    margin-bottom: 28px;
}

.nav-heading, .sidebar-heading {
    font-family: 'Public Sans', sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-light);
    margin-bottom: 12px;
    font-weight: 700;
}

.nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.nav-item .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.95rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-item .nav-link:hover {
    background: var(--brand-blue-subtle);
    color: var(--brand-blue-hover);
    text-decoration: none;
}

.nav-item.active .nav-link {
    background: var(--brand-blue-subtle);
    color: var(--brand-blue);
    font-weight: 700;
}

/* Highlight button i meny (Gul accent) */
.nav-highlight .highlight-link {
    background: var(--brand-gold);
    color: #1a202c !important;
    font-family: 'Cal Sans', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    margin-top: 8px;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(254, 205, 25, 0.4);
}

.nav-highlight .highlight-link:hover {
    background: var(--brand-gold-hover);
    color: #000000 !important;
}

/* Kontakt i Sidebar */
.sidebar-contact {
    padding-top: 18px;
    border-top: 1px solid var(--border-light);
    margin-bottom: 22px;
}

.contact-list {
    list-style: none;
    font-size: 0.92rem;
}

.contact-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--brand-blue);
}

.contact-list a {
    color: var(--text-main);
    font-weight: 600;
    word-break: break-all;
}

/* Sidebar Footer */
.sidebar-footer {
    padding-top: 18px;
    border-top: 1px solid var(--border-light);
    font-size: 0.8rem;
    color: var(--text-light);
    line-height: 1.45;
}

.sidebar-footer a {
    color: var(--text-muted);
}

/* ==========================================================================
   Typografi & Innehåll
   ========================================================================== */

.page-header {
    margin: 0 0 34px 0;
    padding: 34px 0 22px 0;
    border-bottom: 1px solid var(--border-color);
}

.page-title {
    font-family: 'Cal Sans', sans-serif;
    font-size: 2.35rem;
    font-weight: 600;
    color: var(--brand-blue-dark);
    letter-spacing: -0.015em;
    line-height: 1.18;
    margin-bottom: 8px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.page-subtitle {
    font-size: 1.15rem;
    color: #3b506e;
    font-weight: 500;
    line-height: 1.45;
}

.page-date {
    font-size: 0.88rem;
    color: var(--text-light);
    display: block;
    margin-top: 6px;
}



.page-body h1, .page-body h2, .page-body h3, .page-body h4 {
    font-family: 'Cal Sans', sans-serif;
    color: var(--text-heading);
    font-weight: 600;
    line-height: 1.35;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
}

.page-body h2,
.page-body h3,
.page-body h4 {
    width: fit-content;
    max-width: 100%;
    padding-bottom: 6px;
    padding-right: 32px;
    border-radius: 2px;
}

.page-body h2 {
    font-size: 1.65rem;
    padding-bottom: 8px;
    padding-right: 36px;
    border-bottom: 3px solid var(--brand-blue, #003685);
}

.page-body h3 { 
    font-size: 1.35rem; 
    border-bottom: 2.5px solid var(--brand-gold, #fecd19);
}

.page-body h4 { 
    font-size: 1.15rem; 
    line-height: 1.55;
    color: #2d3748;
    border-bottom: 2.5px solid var(--brand-gold, #fecd19);
}

/* Undantag: formulär och kort ska inte ha accentlinjer under sina rubriker */
.order-section h3,
.order-section h4,
.watchlist-section h3,
.watchlist-section h4,
.order-title,
.watchlist-title,
.products-title,
.chicken-card-box h3 {
    width: auto !important;
    max-width: 100% !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
}

.page-body p {
    margin-bottom: 1.35em;
}

.page-body ul, .page-body ol {
    margin-bottom: 1.35em;
    padding-left: 24px;
}

.page-body li {
    margin-bottom: 0.4em;
}

/* ==========================================================================
   Komponenter (Hero banner, Polaroid, Butiks-CTA)
   ========================================================================== */

/* Hero Banner & Overlay-text */
.hero-banner {
    position: relative;
    width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 2em;
    aspect-ratio: 16 / 10;
    background: #0a1e3b;
}

.hero-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay-badge {
    position: absolute;
    bottom: 5%;
    left: 4%;
    background: rgba(10, 30, 59, 0.82);
    color: #ffffff;
    padding: 14px 20px;
    border-radius: var(--radius-sm);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 90%;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.hero-overlay-badge img {
    width: 44px;
    height: auto;
    flex-shrink: 0;
}

.hero-overlay-title {
    font-family: 'Cal Sans', sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.hero-overlay-sub {
    font-size: 0.92rem;
    color: #f1f5f9;
    font-weight: 600;
    line-height: 1.35;
    margin-top: 3px;
}

/* Polaroid Videokort & Bildtexter */
.polaroid-gallery {
    margin: 2.2em 0;
    display: flex;
    justify-content: center;
}

.polaroid-card {
    background: #ffffff;
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    max-width: 100%;
    text-align: center;
    transform: none;
}

.polaroid-card.tilt-right,
.polaroid-card.tilt-left {
    transform: none;
}

.polaroid-card:hover,
.polaroid-card.tilt-right:hover,
.polaroid-card.tilt-left:hover {
    transform: none;
}

.polaroid-card video,
.polaroid-card img {
    width: 100%;
    border-radius: 0;
    display: block;
}

.polaroid-card video {
    background: #000;
}

.polaroid-caption {
    margin-top: 14px;
    font-family: 'Cal Sans', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--brand-blue-dark);
    letter-spacing: -0.01em;
}

/* Call-to-action Äggbutik-box */
.chicken-card-wrapper {
    margin: 2.8em 0 2em 0;
}

.chicken-card-box {
    background: linear-gradient(180deg, #ffffff 0%, #f4f8fd 100%);
    border: 1px solid #cce0f5;
    border-top: 4px solid var(--brand-gold);
    border-radius: var(--radius-md);
    padding: 30px 24px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(10, 30, 59, 0.05);
    max-width: 580px;
    margin: 0 auto;
}

.chicken-card-badge {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand-blue);
    background: #e1effe;
    border: 1px solid #bfdbfe;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.chicken-card-box h3 {
    margin: 0 0 10px 0 !important;
    color: var(--brand-blue-dark);
    font-size: 1.5rem;
    width: auto !important;
    max-width: 100% !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
    border-bottom: none !important;
    text-align: center !important;
    display: block !important;
}

.chicken-card-box p {
    font-size: 1rem;
    color: var(--text-muted);
    margin: 0 auto 18px auto;
    max-width: 440px;
    line-height: 1.5;
}

.chicken-card-box a,
.chicken-card-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--brand-gold) !important;
    color: #000000 !important;
    padding: 11px 24px !important;
    font-family: 'Cal Sans', sans-serif !important;
    font-size: 1.02rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 3px 10px rgba(254, 205, 25, 0.45);
    transition: all 0.2s ease !important;
}

.chicken-card-box a:hover,
.chicken-card-btn:hover {
    background-color: var(--brand-gold-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(254, 205, 25, 0.55);
}

.chicken-card-box a span.arrow,
.chicken-card-btn span.arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}

.chicken-card-box a:hover span.arrow,
.chicken-card-btn:hover span.arrow {
    transform: translateX(4px);
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--brand-blue);
    color: #ffffff !important;
    padding: 12px 26px;
    font-family: 'Cal Sans', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none !important;
    border-radius: var(--radius-sm);
    box-shadow: 0 3px 8px rgba(0, 54, 133, 0.3);
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.btn-primary:hover {
    background-color: var(--brand-blue-hover);
    transform: translateY(-1px);
}

/* ==========================================================================
   Lagerstatus App (renderas i äggkolumnen via js/main.js)
   ========================================================================== */

.inventory-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-top: 4px solid var(--brand-blue);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    box-shadow: 0 4px 12px rgba(10, 30, 59, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.inventory-card.card-duck {
    border-top-color: var(--brand-blue, #003685);
}

.inventory-card.card-hen {
    border-top-color: var(--brand-gold, #fecd19);
}

.inventory-card.is-empty {
    background: #fafbfd;
}

.inventory-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.inventory-type-icon {
    font-size: 1.3rem;
    line-height: 1;
}

.inventory-card-title {
    font-family: 'Cal Sans', sans-serif;
    font-size: 1.2rem;
    color: var(--brand-blue-dark);
    margin: 0 !important;
    flex: 1;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

.inventory-pill-status {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 12px;
}

.inventory-pill-status.status-in {
    background: #e6f7ec;
    color: #037a30;
    border: 1px solid #b7ebd0;
}

.inventory-pill-status.status-out {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

/* Tydligt antal ägg */
.inventory-egg-stat {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 4px 0 14px 0;
}

.inventory-stat-num {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--brand-blue-dark);
    line-height: 1;
    font-feature-settings: tnum;
}

.inventory-card.card-duck .inventory-stat-num {
    color: var(--brand-blue);
}

.inventory-card.card-hen .inventory-stat-num {
    color: #8c6a00;
}

.inventory-card.is-empty .inventory-stat-num {
    color: #9ca3af;
}

.inventory-stat-unit {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* Liten låda-i-lådan för kartonger */
.inventory-subbox {
    background: #f4f8fd;
    border: 1px solid #dce8f6;
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}

.inventory-card.is-empty .inventory-subbox {
    background: #f8f9fa;
    border-color: #e5e7eb;
}

.subbox-icon {
    width: 32px;
    height: 32px;
    background: #ffffff;
    border: 1px solid #dce8f6;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-blue);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.inventory-card.is-empty .subbox-icon {
    color: #9ca3af;
    border-color: #e5e7eb;
}

.subbox-content {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.subbox-count {
    font-size: 0.92rem;
    color: var(--text-heading);
}

.subbox-count strong {
    font-weight: 700;
    color: var(--brand-blue-dark);
}

.subbox-breakdown {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.inventory-loading, .inventory-error, .inventory-empty {
    padding: 18px 22px;
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
    font-weight: 600;
    color: var(--text-muted);
}

.inventory-error {
    background: #fde8e8;
    color: #9b1c1c;
    border: 1px solid #f8b4b4;
}

/* ==========================================================================
   Tillgångsnotis (egg-supply-status.json)
   ========================================================================== */

.supply-notice-box {
    margin-top: 16px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    display: flex;
    gap: 14px;
    align-items: center;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.08);
}

.supply-notice-icon {
    color: #d97706;
    font-size: 1.35rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.supply-notice-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.page-body .supply-notice-box p,
.supply-notice-text {
    margin: 0 !important;
    padding: 0;
    color: #78350f;
    font-size: 0.95rem;
    line-height: 1.5;
}

.supply-notice-text + .supply-notice-text {
    margin-top: 6px !important;
}

/* ==========================================================================
   Fotogalleri
   ========================================================================== */

.photo-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin: 2.5em 0;
}

.gallery-item {
    border-radius: 0;
    overflow: hidden;
    background: #ffffff;
    padding: 6px;
    border: 1px solid var(--border-color);
}

.gallery-item:hover {
    transform: none;
}

.gallery-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
    text-decoration: none !important;
}

.gallery-thumbnail {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s ease;
}

.gallery-item:hover .gallery-thumbnail {
    opacity: 0.92;
}

.gallery-caption-below {
    padding: 10px 12px;
    background: #ffffff;
    text-align: center;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-heading);
    line-height: 1.35;
    border-top: 1px solid var(--border-light);
}

/* ==========================================================================
   GLightbox Anpassning: Vit passepartout-ram i fullskärm
   ========================================================================== */

.glightbox-container .goverlay {
    background: rgba(10, 30, 59, 0.92) !important;
    backdrop-filter: blur(4px);
}

.gslide-image img {
    background: #ffffff !important;
    padding: 7px !important; /* Halverad tjocklek */
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    max-height: 88vh !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .gslide-image img {
        padding: 5px !important;
        border-radius: 4px !important;
    }
}

.gslide-description.description-bottom {
    background: #ffffff !important;
    border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
    padding: 12px 20px !important;
    max-width: 100% !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
}

.gslide-title {
    color: var(--text-heading) !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    font-family: 'Cal Sans', sans-serif !important;
}

.gslide-desc {
    color: var(--text-muted) !important;
    font-size: 0.9rem !important;
}

.gnext, .gprev, .gclose {
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 50% !important;
    transition: background 0.2s ease, transform 0.15s ease !important;
}

.gnext:hover, .gprev:hover, .gclose:hover {
    background: var(--brand-gold) !important;
}

.gnext svg path, .gprev svg path, .gclose svg path {
    fill: #ffffff !important;
}

.gnext:hover svg path, .gprev:hover svg path, .gclose:hover svg path {
    fill: #1a202c !important;
}

/* ==========================================================================
   Tillbaka till toppen-knapp
   ========================================================================== */

#back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    background: var(--brand-blue);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 54, 133, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, background-color 0.15s ease;
    z-index: 90;
}

#back-to-top:hover {
    background: var(--brand-gold);
    color: #1a202c;
    text-decoration: none;
}

#back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   Diskret "Gå till sidans topp" i slutet av innehållet
   ========================================================================== */

.page-footer-top {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
}

.back-to-top-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #2b7bc4;
    background: #ffffff;
    border: 1px solid #c7ddf3;
    border-radius: 20px;
    padding: 6px 16px;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 54, 133, 0.04);
    transition: all 0.2s ease;
}

.back-to-top-text-link:hover {
    color: #0d5aa7;
    background-color: #f2f7fd;
    border-color: #9ac2ec;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0, 54, 133, 0.08);
}

.back-to-top-text-link i {
    font-size: 0.75rem;
    color: #3b8cd6;
}

/* ==========================================================================
   Mobil Header & Responsivitet
   ========================================================================== */

.mobile-header {
    display: none;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 20px;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
}

.mobile-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Cal Sans', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--text-heading);
    text-decoration: none;
}

.mobile-logo {
    width: 34px;
    height: auto;
}

.nav-toggle-btn {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--brand-blue);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
}

.nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 30, 59, 0.4);
    backdrop-filter: blur(2px);
    z-index: 150;
}

@media (max-width: 1240px) {
    .card-shell {
        grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    }

    /* Ägg-kolumnen flyttas under innehållet och breddas */
    .egg-column {
        grid-column: 1 / -1;
        position: static;
        max-height: none;
        overflow-y: visible;
        padding: 26px 24px;
    }

    .inventory-stack {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 16px;
    }
}

@media (max-width: 980px) {
    .mobile-header {
        display: flex;
    }

    .site-container {
        margin: 20px auto;
        padding: 0 16px;
    }

    .card-shell {
        grid-template-columns: 1fr;
    }

    /* Sidebar blir utfällbar mobilmeny */
    .site-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 290px;
        z-index: 200;
        border-radius: 0;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        overflow-y: auto;
        padding: 28px 24px;
        max-height: none;
    }

    .main-content {
        padding: 26px 20px;
    }

    .page-header {
        margin: 0 0 24px 0;
        padding: 24px 0 18px 0;
    }

    .site-sidebar.is-open {
        transform: translateX(0);
    }

    .nav-backdrop.is-open {
        display: block;
    }

    /* Ägg-kolumnen staplas vertikalt även på små skärmar */
    .inventory-stack {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
}

/* ==========================================================================
   Beställningsformulär (Baserow integration)
   ========================================================================== */

.order-section {
    margin: 2.8em 0;
}











.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 18px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-heading);
}

.required-star {
    color: #e53e3e;
}

.form-group input {
    font-family: 'Public Sans', sans-serif;
    font-size: 0.95rem;
    padding: 11px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: #fafbfc;
    color: var(--text-main);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.form-group input:focus {
    outline: none;
    background: #ffffff;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(0, 54, 133, 0.12);
}

/* Produktvalssektion */
.products-selection-box {
    margin: 24px 0;
    padding: 22px;
    background: #f8fafd;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.products-title {
    font-family: 'Cal Sans', sans-serif;
    font-size: 1.25rem;
    color: var(--brand-blue-dark);
    margin: 0 0 16px 0 !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.products-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.product-item {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 2px 6px rgba(10, 30, 59, 0.03);
}

.product-info {
    display: flex;
    flex-direction: column;
}

.product-name {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--brand-blue-dark);
}

.product-detail {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.quantity-picker {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #edf2f7;
    border-radius: var(--radius-sm);
    padding: 3px;
}

.qty-btn {
    width: 32px;
    height: 32px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brand-blue-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.qty-btn:hover {
    background: var(--brand-gold);
    color: #1a202c;
}

.qty-input {
    width: 44px;
    height: 32px;
    text-align: center;
    border: none;
    background: transparent;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-heading);
    -moz-appearance: textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Feedback-rutor */
.form-feedback {
    margin: 18px 0;
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.45;
}

.feedback-success {
    background: #eefaf0;
    color: #1e7e34;
    border: 1px solid #c3e6cb;
}

.feedback-error {
    background: #fde8e8;
    color: #9b1c1c;
    border: 1px solid #f8b4b4;
}

.order-submit-row {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
}

.order-submit-btn {
    border: none;
    cursor: pointer;
    background: var(--brand-gold);
    color: #1a202c !important;
    font-size: 1.05rem;
    padding: 13px 28px;
    box-shadow: 0 3px 10px rgba(254, 205, 25, 0.4);
}

.order-submit-btn:hover {
    background: var(--brand-gold-hover);
    color: #000000 !important;
}

.order-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .polaroid-card {
        width: 100%;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .products-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .order-submit-btn {
        width: 100%;
        justify-content: center;
    }
}

.form-group textarea {
    font-family: 'Public Sans', sans-serif;
    font-size: 0.95rem;
    padding: 11px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: #fafbfc;
    color: var(--text-main);
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.form-group textarea:focus {
    outline: none;
    background: #ffffff;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(0, 54, 133, 0.12);
}

/* Price calculation display */
.product-price-tag {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand-blue);
    background: #eef4fc;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    margin-top: 4px;
}

.order-price-summary {
    margin-top: 18px;
    padding: 14px 18px;
    background: #ffffff;
    border: 1px dashed #bdd4f0;
    border-radius: var(--radius-md);
}

.price-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.summary-label {
    font-weight: 600;
    color: var(--text-main);
    font-size: 0.95rem;
}

.summary-value {
    font-family: 'Cal Sans', sans-serif;
    font-size: 1.3rem;
    color: var(--brand-blue);
}

/* Watchlist Section Styling */
.watchlist-section {
    margin: 35px 0 25px 0;
}











.interest-selection-box {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-bottom: 20px;
}

.interest-main-label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-main);
    margin-bottom: 12px;
}

.interest-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
}

.custom-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text-main);
    user-select: none;
}

.custom-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--brand-blue);
    cursor: pointer;
}


/* ==========================================================================
   Gemensam styling för Formulärkort (Order & Bevakning)
   ========================================================================== */
.order-card,
.watchlist-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-top: 4px solid var(--brand-blue);
    border-radius: var(--radius-lg);
    padding: 15px 26px 24px 26px !important;
    box-shadow: var(--shadow-card);
}

.order-header,
.watchlist-header {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    padding-top: 0 !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--border-color);
}

.order-icon-badge,
.watchlist-icon-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #eef4fc;
    color: var(--brand-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.order-title,
.watchlist-title {
    font-family: 'Cal Sans', sans-serif;
    font-size: 1.35rem;
    color: var(--text-heading);
    margin: 0 0 3px 0 !important;
    line-height: 1.25;
}

.order-subtitle,
.watchlist-subtitle {
    font-size: 0.94rem;
    color: var(--text-muted);
    margin: 0 !important;
    line-height: 1.45;
}

/* Stöd för mjuk scroll och offset till ankaret */
.watchlist-section,
#bevakningslista {
    scroll-margin-top: 40px;
}
.order-section,
#bestallning {
    scroll-margin-top: 40px;
}

/* Fristående butiksknapp */
.store-btn-wrapper {
    text-align: center;
    margin: 2.2em 0;
}

.btn-store {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--brand-gold, #fecd19);
    color: var(--brand-blue-dark, #0a1e3b) !important;
    padding: 11px 26px;
    font-family: 'Cal Sans', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none !important;
    border-radius: var(--radius-sm, 6px);
    box-shadow: 0 2px 6px rgba(254, 205, 25, 0.4);
    transition: all 0.2s ease;
}

.btn-store:hover {
    background-color: var(--brand-gold-hover, #e5b607);
    color: #000000 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(254, 205, 25, 0.5);
}


/* ==========================================================================
   KahunaCart ↔ Tre ankor-temat — token-brygga
   --------------------------------------------------------------------------
   KahunaCart-butiken löser sina färger via --kahunacart-* (fallback till
   --grav-*, sedan systemfärger). Detta block mappar temats variabler dit,
   så butiken får samma blå/guld-profil, kort, knappar och typografi som
   resten av treankor.eu. Placerad sist i main.css → laddas efter pluginets
   egen stylesheet.
   ========================================================================== */

.kahunacart {
    --kahunacart-fg: var(--text-main);
    --kahunacart-bg: var(--bg-surface);
    --kahunacart-border: var(--border-color);
    --kahunacart-border-strong: var(--border-color);
    --kahunacart-muted: var(--text-muted);
    --kahunacart-subtle: var(--text-light);
    --kahunacart-accent: var(--brand-gold-dark);
    --kahunacart-accent-strong: var(--brand-blue);
    --kahunacart-accent-ink: var(--brand-gold-dark);
    --kahunacart-surface: var(--bg-subtle);
    --kahunacart-surface-2: var(--bg-subtle);
    --kahunacart-card: var(--bg-card);
    --kahunacart-input: var(--bg-subtle);
    --kahunacart-radius: var(--radius-sm);
    --kahunacart-radius-lg: var(--radius-md);
    --kahunacart-on-accent-strong: #ffffff;
    --kahunacart-success: #1d7a4f;
    --kahunacart-warning: var(--brand-gold-dark);
    --kahunacart-danger: #b03a2e;
}

/* Rubriker inne i butiken: Cal Sans som resten av sidan */
.kahunacart h1,
.kahunacart h2,
.kahunacart h3,
.kahunacart .kahunacart-nav-title {
    font-family: 'Cal Sans', sans-serif;
    color: var(--text-heading);
    font-weight: 600;
}

/* Knappar: temat definierar ingen .button, och pluginets :where()-fallback
   målar med neutral ytterkant. Ge butikens knappar samma profil som
   .btn-primary (blå fyllnad, Cal Sans) — men tunnare, som en "Visa"-knapp. */
.kahunacart .button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--brand-blue);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.5rem 1.2rem;
    font-family: 'Cal Sans', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 54, 133, 0.25);
    transition: background-color 0.15s ease, transform 0.1s ease;
}
.kahunacart .button:hover {
    background: var(--brand-blue-hover);
    transform: translateY(-1px);
    text-decoration: none;
}
.kahunacart .button:focus-visible {
    outline: 2px solid var(--brand-gold);
    outline-offset: 2px;
}

/* Sekundära/tonade knappar (t.ex. "Fortsätt handla") */
.kahunacart .button.kahunacart-button-secondary,
.kahunacart a.kahunacart-continue-shopping {
    background: var(--bg-card);
    color: var(--brand-blue);
    border: 1px solid var(--border-color);
    box-shadow: none;
}
.kahunacart .button.kahunacart-button-secondary:hover,
.kahunacart a.kahunacart-continue-shopping:hover {
    background: var(--brand-blue-subtle);
}

/* Produktkort: vit yta, mjuk skugga, guld vid hover */
.kahunacart-product-card {
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kahunacart-product-card:hover {
    border-color: var(--brand-gold);
    box-shadow: 0 6px 18px rgba(10, 30, 59, 0.10);
}

/* Sökfält och inputs */
.kahunacart-search input,
.kahunacart input:not([type="checkbox"]):not([type="radio"]),
.kahunacart select,
.kahunacart textarea {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-main);
}
.kahunacart-search input:focus,
.kahunacart input:focus,
.kahunacart select:focus,
.kahunacart textarea:focus {
    border-color: var(--brand-blue);
}

/* Aktiv kategori: guldchip med mörkt guldbläck */
.kahunacart-cat-link.is-current {
    background: var(--brand-gold-subtle);
    color: var(--brand-gold-dark);
    border-color: var(--brand-gold);
}

/* ==========================================================================
   Kompakt lagerstatus (mobil) — rad under sidrubriken
   ========================================================================== */
.stock-compact-bar {
    display: none;
}

@media (max-width: 1240px) {
    .stock-compact-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin: -18px 0 26px 0;
        padding: 10px;
        background: var(--bg-surface);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg, 10px);
    }

    .stock-compact-loading {
        font-size: 0.88rem;
        color: var(--text-light, #64748b);
        padding: 6px 4px;
    }

    .stock-compact-card {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 12px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        text-decoration: none;
        color: inherit;
    }

    .stock-compact-label {
        display: flex;
        align-items: center;
        gap: 7px;
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--brand-blue-dark, #12305e);
    }

    .stock-compact-label i {
        color: var(--brand-gold-dark, #b98a1d);
    }

    .stock-compact-count {
        font-weight: 700;
        font-size: 0.9rem;
        white-space: nowrap;
    }

    .stock-compact-badge {
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        padding: 4px 8px;
        border-radius: 999px;
        background: #e6f6ec;
        color: #157a44;
        white-space: nowrap;
    }

    /* Undvik dubbel visning: dölj den stora äggkolumnen på mobil */
    .egg-column {
        display: none;
    }
}

@media (max-width: 420px) {
    .stock-compact-bar {
        grid-template-columns: 1fr;
    }
}


/* ===== v10: Kompakta produktrutor ===== */

.kahunacart-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 14px !important;
}
.kahunacart-product-card img,
.kahunacart-product-card .product-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
}
.kahunacart-product-card {
    padding: 12px !important;
}
.kahunacart-product-card .product-title,
.kahunacart-product-card h3 {
    font-size: 1.0em !important;
}
.kahunacart-product-card .product-price {
    font-size: 0.95em !important;
}

/* ===== v11: Brödsmulor i Gårdsbutiken ===== */

.shop-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px 0;
    font-size: 0.85em;
    color: var(--text-muted);
}
.shop-breadcrumb a {
    color: var(--brand-gold-dark);
    text-decoration: none;
}
.shop-breadcrumb a:hover {
    text-decoration: underline;
}
.shop-crumb-sep {
    color: var(--text-light);
}
.shop-crumb-current {
    color: var(--text-main);
}

/* ===== v13: Recensionssektion + avstånd på produktsidan ===== */

/* Tydligare avsnitt: rekursionerna ligger i en ljusblå ruta, med extra luft ovanför */
.kahunacart-reviews {
    margin-top: 48px;
    padding: 22px 24px;
    background: #eef4fb;
    border: 1px solid #d3e0f2;
    border-radius: 10px;
}
.kahunacart-reviews h2 {
    margin: 0 0 12px 0;
}
.kahunacart-reviews-empty {
    color: #44506b;
}

/* Extra radbrytning mellan recensioner och "Tillbaka till butiken" */
.kahunacart a.kahunacart-continue-shopping,
.kahunacart .kahunacart-back-link {
    margin-top: 20px;
    display: inline-block;
}

/* "Tillbaka till butiken" ligger som vanlig <p><a> efter recensionsrutan */
.kahunacart-page p > a[href$="/sv/butik"],
.kahunacart p > a[href$="/sv/butik"] {
    display: inline-block;
    margin-top: 20px;
}

/* ===== v14: bild ska inte skjuta utanfor produktkortet ===== */
.kahunacart-product-card {
    overflow: hidden;
}
.kahunacart-product-card img,
.kahunacart-product-card .product-image {
    max-width: 100%;
    margin: -12px -12px 10px -12px; /* tar kortets padding pa topp/sidor */
    border-radius: 0;
    display: block;
}

/* ===== v14 tillagg: bild fyller kortet helt (ingen blå kant) ===== */
.kahunacart-product-card {
    overflow: hidden;
}
.kahunacart-product-card .product-image,
.kahunacart-product-card .product-image img,
.kahunacart-product-card img {
    width: 100%;
    max-width: none;
    background: transparent;
    margin: 0 0 0 0 !important;
    padding: 0 !important;
}

/* ---- Fraktberäkning (varukorg) ---- */
.kahunacart-estimate {
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}
.kahunacart-estimate-title {
    margin: 0 0 1rem;
    font-size: 1.15rem;
}
.kahunacart-estimate-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: flex-end;
    margin-bottom: 1rem;
}
.kahunacart-estimate-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 200px;
}
.kahunacart-estimate-field > span {
    font-size: 0.85rem;
    color: var(--text-muted);
}
.kahunacart-estimate-totals {
    width: auto;
    max-width: 100%;
    min-width: 0;
    border-collapse: collapse;
}
@media (max-width: 480px) {
    .kahunacart-estimate-totals th { padding-right: 0.75rem; }
}
.kahunacart-estimate-totals th {
    text-align: left;
    font-weight: normal;
    color: var(--text-muted);
    padding: 0.3rem 1.5rem 0.3rem 0;
}
.kahunacart-estimate-totals td {
    text-align: right;
    padding: 0.3rem 0;
}
.kahunacart-estimate-total th,
.kahunacart-estimate-total td {
    font-weight: 600;
    border-top: 1px solid var(--border-color);
    padding-top: 0.6rem;
    margin-top: 0.4rem;
}
.kahunacart-estimate-included,
.kahunacart-estimate-note {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}
/* ---- Kassa: pickup-dubbletter + valideringshint ---- */
/* KahunaCart skriver platsnamnet tre gånger: radioknapp, rubrik och första adressraden. Behåll bara radioknappen. */
.kahunacart-pickup .kahunacart-pickup-location-name,
.kahunacart-pickup .kahunacart-pickup-location-address .kahunacart-pickup-line:first-child {
    display: none;
}
/* Valideringshint "Avsluta adress ovanför först": KahunaCart drar den upp med
   -1.25rem ovanför (step-actions + step-missing) så den hamnar bakom knappen.
   Ångra den negativa marginalen och ge hinten egen plats under knappen. */
.kahunacart :where(.kahunacart-step-actions + .kahunacart-step-missing) {
    margin-block-start: 12px !important;
}
.kahunacart-step-missing {
    display: block;
    clear: both;
    color: #b3261e;
    font-size: 0.9em;
}

/* KahunaCart: länk till varukorgen i sidomenyn */
.nav-cart-link .nav-link {
    display: flex;
    align-items: center;
    gap: 0.5em;
}


/* ==========================================================================
   KahunaCart kvitto-sida: separera Återbetalning och Orderhistorik
   (.ta-refund-section / .ta-history-section wrappas i tema-templaten)
   ========================================================================== */
.kahunacart-order .ta-refund-section,
.kahunacart-order .ta-history-section {
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(29, 79, 163, 0.15);
}

.kahunacart-order .ta-section-title {
    font-family: 'Roboto Slab', serif;
    font-size: 1.25rem;
    color: #1d4fa3;
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #1d4fa3;
}

/* Refund-lådan: partialens rot är <details class="kahunacart-refund-request-details">.
   Rensa partialens/temats inre boxar så att bara YTTRE lådan syns. */
.kahunacart-order .ta-refund-section > details.kahunacart-refund-request-details {
    background: #f7f9fc;
    border: 1px solid rgba(29, 79, 163, 0.2);
    border-radius: 10px;
    padding: 1rem 1.5rem 1.5rem;
    max-width: 42rem;
    margin: 0 auto;
}

/* summary: ingen inre box, bara rad */
.kahunacart-order .ta-refund-section summary.kahunacart-refund-request-open {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0.25rem 0 0.75rem;
    font-weight: 600;
    color: #1d4fa3;
    cursor: pointer;
}

/* formuläret: ingen egen ram/bakgrund */
.kahunacart-order .ta-refund-section form.kahunacart-refund-request-form {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

/* intro + fält: inga boxar */
.kahunacart-order .ta-refund-section .kahunacart-refund-request-intro,
.kahunacart-order .ta-refund-section .kahunacart-refund-request-field {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0.35rem 0;
    margin: 0;
}

/* submitt-knappen: normal Tre Ankor-knapp */
.kahunacart-order .ta-refund-section .kahunacart-refund-request-submit {
    margin-top: 1rem;
}

/* Orderhistorik som punktlista/tidslinje */
.kahunacart-order .ta-history-section ol,
.kahunacart-order .ta-history-section ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kahunacart-order .ta-history-section li {
    position: relative;
    padding: 0.6rem 0 0.6rem 1.75rem;
    border-bottom: 1px dashed rgba(29, 79, 163, 0.15);
}

.kahunacart-order .ta-history-section li::before {
    content: '';
    position: absolute;
    left: 0.35rem;
    top: 1.05rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #1d4fa3;
    opacity: 0.85;
}

.kahunacart-order .ta-history-section li:last-child {
    border-bottom: none;
}

/* Sista sektionen i kvittot ska inte ha dubbel avgränsning mot sidfot */
.kahunacart-order section:last-of-type {
    margin-bottom: 2rem;
}


/* Order-länkar → knappar (egna klasser, inga krockar med tema/plugin) */
.ta-order-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.ta-order-links .ta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.75rem;
    padding: 0 1.25rem;
    line-height: 1;
    white-space: nowrap;
    background: #1d4fa3;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background 0.15s ease;
}

.ta-order-links .ta-btn:hover {
    background: #163e80;
    color: #fff;
    text-decoration: none;
}

    background: #f0f4fa;
}

/* Orderhistorik: förtydliga vad som hände och när */
.kahunacart-order-history .kahunacart-order-history-what,
.kahunacart-order-history-what,
li.kahunacart-order-history-entry .kahunacart-order-history-what,
li.kahunacart-order-history-entry--note-customer .kahunacart-order-history-what {
    font-weight: 700 !important;
}

.kahunacart-order-history .kahunacart-order-history-when {
    font-weight: 600;
    color: #1d4fa3;
}

/* ==========================================================================
   ETA-notis för slut produkt (i "Aktuellt ägglager"-kortet)
   ========================================================================== */
.inventory-eta-note {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 8px;
}
.inventory-eta-note.eta-waiting {
    background: #fdf3e7;
    color: #a35a12;
    border: 1px dashed #d9a05f;
}
.inventory-eta-note.eta-ready {
    background: #e7f5ec;
    color: #1e7a3c;
    border: 1px solid #b5d8c2;
}
.inventory-eta-note i {
    flex-shrink: 0;
}

/* ==========================================================================
   "Till kassan" — gul accentknapp
   ========================================================================== */
a.button.kahunacart-checkout-link,
.button.kahunacart-checkout-link {
    background: #f5c518 !important;
    border-color: #f5c518 !important;
    color: #1a1a1a !important;
}
a.button.kahunacart-checkout-link:hover,
.button.kahunacart-checkout-link:hover {
    background: #e0b10e !important;
    border-color: #e0b10e !important;
    color: #1a1a1a !important;
}

/* ===== Butikskredit (gift card): extra avstånd till ovanliggande element ===== */
.kahunacart .kahunacart-gift-card,
.kahunacart-gift-card {
    margin-block-start: 2.5rem !important;
    padding-block-start: 1.5rem !important;
    border-top: 1px solid var(--kc-border, rgba(0,0,0,.12));
}

/* ===== Notis på checkout: ordern är icke-bindande tills manuell bekräftelse ===== */
.order-nonbinding-notice {
    border: 1px solid var(--kc-border, #d8dee9);
    border-radius: var(--kc-radius-lg, 12px);
    padding: 1rem 1.15rem 1.15rem;
    margin: 0 0 1.25rem;
    max-width: 42rem;
    background: rgba(245, 197, 24, 0.18);
}
.order-nonbinding-notice .order-nonbinding-legend {
    display: block;
    font-weight: 700;
    margin-bottom: .35rem;
    color: #5a4a15;
}
.order-nonbinding-notice p {
    margin: 0;
    font-size: .95rem;
    color: #5a4a15;
}

/* Visa varukorg — dämpad gul variant av Beställ ägg-knappen */
.nav-highlight .highlight-link-soft {
    background: rgba(254, 205, 25, 0.45);
    color: #1a202c !important;
    box-shadow: none;
}
.nav-highlight .highlight-link-soft:hover {
    background: rgba(254, 205, 25, 0.65);
}

/* Lägg beställning-knappen i samma gula accent som Till kassan */
.kahunacart .kahunacart-place-order {
    background: #f5c518 !important;
    border-color: transparent !important;
    color: #1a1a1a !important;
    font-weight: 600;
}
.kahunacart .kahunacart-place-order:hover {
    background: #e0b10e !important;
    color: #1a1a1a !important;
}

/* ============================================
   Rabattkupong (applicerad) som liten chip-ruta
   ============================================ */
ul.kahunacart-coupon-applied {
    list-style: none !important;
    margin: 0.75rem 0 0 !important;
    padding: 0 !important;
}
ul.kahunacart-coupon-applied > li {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.75rem;
    background: #eef7ee;
    border: 1px solid #bfe0bf;
    border-radius: 8px;
    padding: 0.4rem 0.8rem;
    list-style: none;
}
.kahunacart-coupon-applied-code {
    font-weight: 700;
    color: #1e6b30;
    letter-spacing: 0.05em;
    font-size: 0.9rem;
}
button.button.kahunacart-coupon-remove,
.kahunacart-coupon-remove.button {
    background: transparent !important;
    border: none !important;
    color: #666 !important;
    padding: 0.15rem 0.5rem !important;
    font-size: 0.85rem;
    box-shadow: none !important;
    margin: 0 !important;
}
button.button.kahunacart-coupon-remove:hover,
.kahunacart-coupon-remove.button:hover {
    color: #b02020 !important;
    background: transparent !important;
    text-decoration: underline;
}

/* KahunaCart: "Slut i lager" badge on product cards (stock overrides) */
.kahunacart-product-card .kahunacart-stock-badge {
    display: inline-block;
    margin: 0 0 .4em;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--ac-soft, #f2ede4);
    color: #8a3b12;
    font-size: .78em;
    font-weight: 600;
    letter-spacing: .02em;
}
.kahunacart-product-card .kahunacart-stock-badge--in {
    background: #d9f2c8;
    color: #2f7a1f;
}

/* Bevakningslista-knapp under lagerstatuskorten */
.egg-column-watchlist-link { margin-top: 12px; }
.watchlist-button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 24px; border-radius: 8px; background-color: #fecd19; color: #000; font-weight: bold; text-decoration: none; box-shadow: 0 4px 6px rgba(0,0,0,0.12); }
.watchlist-button:hover { transform: translateY(-1px); }
.order-eggs-button { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 8px; background-color: #fecd19; color: #000; font-weight: bold; text-decoration: none; box-shadow: 0 4px 6px rgba(0,0,0,0.12); }
.order-eggs-button:hover { transform: translateY(-1px); }

/* Beställ-ägg-knapp i mobilheadern, höger om logotypen */
.header-order-button { padding: 8px 14px; border-radius: 8px; font-size: 0.85rem; box-shadow: none; white-space: nowrap; }
.header-order-button i { font-size: 0.8rem; }

/* Butik-knapp i mobilheadern (renderad i Twig) */
.header-order-button { padding: 6px 9px; border-radius: 8px; font-size: 0.72rem; box-shadow: none; white-space: nowrap; margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.header-order-button i { font-size: 0.7rem; }
.header-order-button { padding: 6px 9px; font-size: 0.72rem; gap: 3px; }

/* KahunaCart-kassa: lange leveransnamn far krascha raden pa sma skarmar.
   min-width:0 ger texten rum att bryta, price-kolumnen fastr nab kanten. */
.kahunacart-shipping-method, .kahunacart-provider { flex-wrap: wrap; }
.kahunacart-shipping-method > *:first-child { min-width: 0; }
.kahunacart-shipping-method .kahunacart-price { white-space: nowrap; }

/* Varukorg: stapla tabellen som kort pa sma skarmar istallet for horisontell scroll. */
@media (max-width: 640px) {
    .kahunacart-cart-table {
        display: block;
        width: 100%;
        border: none;
    }
    .kahunacart-cart-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .kahunacart-cart-table,
    .kahunacart-cart-table tbody,
    .kahunacart-cart-table tr,
    .kahunacart-cart-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    .kahunacart-cart-table tbody {
        display: block;
    }
    .kahunacart-cart-table tr {
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md, 8px);
        background: var(--bg-card, #fff);
        padding: 4px 12px;
        margin-bottom: 12px;
        box-shadow: 0 2px 6px rgba(10,30,59,0.05);
    }
    .kahunacart-cart-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 0;
        border: none;
        text-align: left;
    }
    .kahunacart-cart-table td + td {
        border-top: 1px solid var(--border-color);
    }
    .kahunacart-cart-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-muted, #666);
        font-size: 0.82rem;
        flex: none;
        white-space: nowrap;
    }
    .kahunacart-cart-table td:nth-child(1)::before { content: "Produkt"; }
    .kahunacart-cart-table td:nth-child(2)::before { content: "Pris"; }
    .kahunacart-cart-table td:nth-child(3)::before { content: "Antal"; }
    .kahunacart-cart-table td:nth-child(4)::before { content: "Totalt"; }
    .kahunacart-cart-table td:nth-child(5)::before { content: none; }
    .kahunacart-cart-table td:nth-child(5) { justify-content: flex-end; padding: 6px 0; }
    /* produktnamnet far brytas fritt */
    .kahunacart-cart-table td:nth-child(1) > :first-child { min-width: 0; overflow-wrap: anywhere; text-align: right; }
    .kahunacart-cart-table .kahunacart-qty-hint { display: block; width: 100%; text-align: right; margin-top: 2px; }
    .kahunacart-cart-table td:nth-child(3) { flex-wrap: wrap; }
    .kahunacart-cart-table input[type="number"] { width: 70px; margin-left: auto; }
}

/* Butiken: 2 produktkort i bredd pa mobilen. */
@media (max-width: 640px) {
    .kahunacart-product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .kahunacart-product-card { padding: 8px !important; }
    .kahunacart-product-card .product-title,
    .kahunacart-product-card h3 { font-size: 0.95rem; }
    .kahunacart-product-card .product-price { font-size: 0.95rem; }
    .kahunacart-product-card .button { width: 100%; padding: 8px 10px; font-size: 0.85rem; }
    .kahunacart-product-card .kahunacart-stock-badge { font-size: 0.72rem; padding: 4px 8px; }
}

/* ── KahunaCart account nav: tabs ─────────────────────────────────────────
   Theme override of the plugin's plain link list (plugin renders the same
   markup, this partial is overridden in templates/partials/). Tabs read as
   small cards in a row; the current one lifts, with a small shadow to the
   left and underneath (light from the right). The logout button sits on its
   own row, light blue, clear of the links above it. */
.kahunacart .kahunacart-account-nav {
    margin-block: 1rem 2rem;
    border-block-end: 0;
}
.kahunacart .kahunacart-account-nav ul {
    gap: 0.45rem;
}
.kahunacart .kahunacart-account-nav-item {
    padding-block-end: 0;
    margin-block-end: 0;
}
.kahunacart .kahunacart-account-nav-item--current {
    border-block-end: 0;
}
.kahunacart .kahunacart-account-nav a,
.kahunacart .kahunacart-account-nav span {
    display: block;
    padding: 0.4rem 0.95rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
    color: var(--text-main);
    font-size: 0.95em;
    text-decoration: none;
}
.kahunacart .kahunacart-account-nav a:hover {
    border-color: var(--brand-blue);
    background: var(--brand-blue-subtle);
    text-decoration: none;
}
.kahunacart .kahunacart-account-nav-item--current span {
    background: var(--bg-card);
    font-weight: 600;
    border-color: var(--border-color);
    box-shadow: -3px 4px 7px -2px rgba(10, 30, 59, 0.16);
}
.kahunacart .kahunacart-account-nav-item--logout {
    flex-basis: 100%;
    margin-block-start: 1.4rem;
}
.kahunacart .kahunacart-account-nav-item--logout a {
    display: inline-block;
    width: auto;
    border-color: transparent;
    background: var(--brand-blue-subtle);
    color: var(--brand-blue-dark);
    font-weight: 600;
}
.kahunacart .kahunacart-account-nav-item--logout a:hover {
    background: color-mix(in srgb, var(--brand-blue-subtle) 80%, var(--brand-blue) 20%);
}

/* ── Inloggningssidan (Login-pluginet, treankor-brandad) ──────────────────
   templates/login.html.twig wrappar pluginets partial i temat. Innehållet
   ligger redan i temats card-shell, så wrappern och pluginets #grav-login
   är medvetet utan egen ram: ingen ruta i rutan.
   (#grav-login:s egen max-width/bakgrund/kant kommer från
   user/plugins/login/css/login.css och nollställs nedan.) */
.treankor-login {
    max-width: 26rem;
    margin: 2rem 0 3rem;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
.treankor-login h1 {
    margin-top: 0;
    font-size: 1.4rem;
}
/* Pluginets egna inramning + centrerade småtext på login-sidan: bort. */
.treankor-login #grav-login {
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    text-align: left;
}
.treankor-login #grav-login p {
    text-align: left;
}
.treankor-login #grav-logout {
    position: static;
}
.treankor-login .form-field,
.treankor-login .form-group {
    margin-block: 1rem;
}
.treankor-login .form-field label,
.treankor-login .form-group label {
    display: block;
    margin-block-end: 0.3rem;
    font-weight: 600;
    font-size: 0.92em;
    color: var(--text-heading);
}
.treankor-login .form-field input,
.treankor-login .form-group input {
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
    color: var(--text-main);
}
.treankor-login .form-field input:focus,
.treankor-login .form-group input:focus {
    outline: none;
    background: var(--bg-card);
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(0, 54, 133, 0.12);
}
.treankor-login .form-actions,
.treankor-login .form-field .form-data {
    margin-top: 1.5rem;
}
.treankor-login .login-form .button,
.treankor-login button[type="submit"] {
    font-family: inherit;
    display: block;
    width: 100%;
    margin-top: 1.5rem;
    background: var(--brand-blue);
    color: #fff;
    border: 1px solid var(--brand-blue);
    border-radius: var(--radius-sm);
    padding: 0.65rem 1rem;
    font-weight: 600;
    cursor: pointer;
}
.treankor-login .login-form .button:hover,
.treankor-login button[type="submit"]:hover {
    background: color-mix(in srgb, var(--brand-blue) 88%, #000);
    border-color: var(--brand-blue);
    color: #fff;
}
.treankor-login .login-form .button.secondary,
.treankor-login button[type="submit"] + a.button.secondary {
    display: inline-block;
    width: auto;
    background: transparent;
    border: none;
    padding: 0;
    color: var(--brand-blue);
    font-weight: 600;
}
.treankor-login .form-actions::after {
    content: "";
    display: block;
    clear: both;
}
.treankor-login .rememberme {
    float: left;
    padding: 0;
}
.treankor-login .rememberme label,
.treankor-login .rememberme input[type="checkbox"] {
    display: inline;
    width: auto;
    margin-inline-end: 0.35rem;
}
.treankor-login .form-actions .button.secondary {
    float: right;
}