/* ==========================================================================
   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: clip;
    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: 34px 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);
}

/* Sökfältet i butiken: fält, sökknapp och inloggningsknapp fyller tillsammans en rad */
form.kahunacart-search {
    display: flex;
    gap: 8px;
    align-items: stretch;
    width: 100%;
}
form.kahunacart-search .kahunacart-search-field {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
}
form.kahunacart-search .kahunacart-search-field input {
    width: 100%;
    min-width: 0;
}
form.kahunacart-search .button,
form.kahunacart-search .kahunacart-login-link {
    flex: 0 0 auto;
    white-space: nowrap;
    text-align: center;
}
form.kahunacart-search .kahunacart-login-link {
    background: #2b3fd4;
    border-color: #2b3fd4;
}

/* 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;
}

/* Sökfältet ur spel tills vidare — felet i fuzzy-sökvägen är parkerat.
   Dölj bara fältet och sökknappen; Logga in-knappen bor i samma form. */
form.kahunacart-search .kahunacart-search-field,
form.kahunacart-search button[type="submit"] {
    display: none !important;
}

/* ==========================================================================
   KahunaCart produktsida — två kolumner när det finns plats
   --------------------------------------------------------------------------
   Pluginet staplar galleri, sammanfattning, beskrivning, köpformulär och
   önskelista i full bredd. En kvadratisk produktbild fyller då hela
   innehållskolumnen och texten hamnar under bildens slut.

   Från 641px lägger vi galleriet i vänster kolumn (max 34rem, så en 1:1-bild
   blir ~34rem hög i stället för hela kolumnen) och resten i en flytande
   höger kolumn. Ordningen följer DOM:en i höger kolumn (köpformulär före
   beskrivning), medan säkerhetsinformationen spänner över båda kolumnerna
   igen längst ner.

   Radnumren är fasta för att beskrivningen inte ska hamna mellan
   sammanfattning och köpknapp. Tomma rader (t.ex. om köpformuläret saknas)
   kollapsar till nollhöjd, så sidan håller utan att formulär finns.
   ========================================================================== */

@media (min-width: 900px) {
    .kahunacart-product {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
        gap: 0 3rem;
        align-items: start;
    }

    .kahunacart-product > .kahunacart-breadcrumbs {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    /* Galleriet i vänster kolumn, från rad 2 till precis före beskrivningen
       (rad 12). Lediga rader kollapsar till nollhöjd. */
    .kahunacart-product > .kahunacart-gallery {
        grid-column: 1;
        grid-row: 2 / 12;
    }

    /* Korten (pris/antal/köp) sträcker sig inte över hela panelen */
    .kahunacart-product > .kahunacart-buy .kahunacart-summary {
        max-width: 20rem;
    }

    /* Produktnamnet (h1) kommer direkt efter brödsmulorna i DOM:en men är
       auto-placerat — utan radnummer hamnar det längst ner. Ge det rad 2 i
       höger kolumn och flytta panelens övriga rader ett steg nedåt. */
    .kahunacart-product > h1 {
        grid-column: 2;
        grid-row: 2;
    }

    .kahunacart-product > .kahunacart-summary {
        grid-column: 2;
        grid-row: 3;
    }

    .kahunacart-product > .kahunacart-buy {
        grid-column: 2;
        grid-row: 4;
    }

    .kahunacart-product > .kahunacart-wishlist-add {
        grid-column: 2;
        grid-row: 5;
    }

    /* Beskrivningen hamnar under köprutan i panelen. */
    .kahunacart-product > .kahunacart-description {
        grid-column: 2;
        grid-row: 6;
    }

    /* Säkerhetsinformationen (tillverkare, EU-ansvarig m.m.) tar hela bredden
       igen. Auto-placeringen väljer den första raden där den passar, dvs. efter
       galleriets span (rad 12) — inget radnummer behövs. */
    .kahunacart-product > .kahunacart-product-safety-body {
        grid-column: 1 / -1;
    }

    /* Köprutan: pris + antal på en rad, "Gräns x per beställning" och
       köpknappen under — i stället för allt på samma rad. */
    .kahunacart-product .kahunacart-buy {
        flex-wrap: wrap;
    }

    .kahunacart-product .kahunacart-buy .kahunacart-price {
        order: 1;
    }

    .kahunacart-product .kahunacart-buy .kahunacart-compare-price {
        order: 2;
    }

    .kahunacart-product .kahunacart-buy .kahunacart-qty {
        order: 3;
    }

    .kahunacart-product .kahunacart-buy .kahunacart-qty-hint {
        order: 4;
        flex-basis: 100%;
    }

    .kahunacart-product .kahunacart-buy .button {
        order: 5;
    }
}

/* Villkorskryssrutan flyttad av kahunacart-checkout-terms.js in i adresssteget */
#kahunacart-checkout-address .kahunacart-checkbox {
    margin: 0.5rem 0 0.75rem;
}

/* ===== v24: luft mellan produktbild och produktnamn i kortet ===== */
.kahunacart-product-card .kahunacart-card-link h3 {
    margin-top: 14px;
}