/* ============================================================
   Grásíða Myndasögur — Stílblað
   Aðallitur: #049680 (teal)
   Letrar: Cormorant Garamond (fyrirsagnir) + Nunito (meginmál)
   ============================================================ */

/* ------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------ */
:root {
    /* Aðallitir */
    --teal:         #049680;
    --teal-d:       #027A68;   /* Darker */
    --teal-dd:      #015F51;   /* Darkest */
    --teal-l:       #05B298;   /* Lighter */
    --teal-xl:      #E6F7F4;   /* Very light, bg tint */
    --teal-xxl:     #F0FAFA;   /* Barely there */

    /* Hlutlægar */
    --gull:         #F59E0B;   /* Warm gold accent */
    --gull-l:       #FEF3C7;
    --rauður:       #DC2626;
    --grænn:        #16A34A;

    /* Grátt */
    --myrkur:       #1E293B;   /* Near-black navy */
    --grár-d:       #334155;
    --grár:         #64748B;
    --grár-l:       #94A3B8;
    --grár-xl:      #CBD5E1;
    --lín:          #E2E8F0;

    /* Bakgrunnar */
    --bg:           #F7FFFE;   /* Very slight teal tint */
    --bg-hvítur:    #FFFFFF;
    --bg-grár:      #F8FAFC;

    /* Leturgerðir */
    --font-haus:    'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-megn:    'Nunito', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* Bil-skali (4px base) */
    --b1:  0.25rem;
    --b2:  0.5rem;
    --b3:  0.75rem;
    --b4:  1rem;
    --b5:  1.25rem;
    --b6:  1.5rem;
    --b8:  2rem;
    --b10: 2.5rem;
    --b12: 3rem;
    --b16: 4rem;
    --b20: 5rem;

    /* Breidd */
    --w:      1200px;
    --w-þröng: 800px;
    --w-mjög-þröng: 560px;

    /* Skuggar */
    --sk-1: 0 1px 3px rgba(0,0,0,0.08);
    --sk-2: 0 4px 12px rgba(0,0,0,0.08);
    --sk-3: 0 8px 24px rgba(0,0,0,0.10);
    --sk-teal: 0 4px 16px rgba(4,150,128,0.25);

    /* Radíusar */
    --r:  8px;
    --r2: 12px;
    --r3: 16px;
    --r-pill: 100px;

    /* Hraði */
    --h:  180ms ease;
    --h2: 300ms cubic-bezier(0.34, 1.56, 0.64, 1); /* spring */
}


/* ------------------------------------------------------------
   2. RESET OG GRUNNUR
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-megn);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    color: var(--grár-d);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-haus);
    font-weight: 700;
    line-height: 1.15;
    color: var(--myrkur);
}

p { max-width: 68ch; }
a { color: inherit; text-decoration: none; transition: color var(--h), opacity var(--h); }
img, svg { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button { font-family: var(--font-megn); cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: var(--font-megn); }


/* ------------------------------------------------------------
   3. HJÁLPAR FLOKKAR
   ------------------------------------------------------------ */
.gs-w {
    max-width: var(--w);
    margin-inline: auto;
    padding-inline: var(--b8);
}

.gs-w--þröng { max-width: var(--w-þröng); }
.gs-w--mjög-þröng { max-width: var(--w-mjög-þröng); }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}


/* ------------------------------------------------------------
   4. TOPPLÍNA
   ------------------------------------------------------------ */
.gs-topplina {
    background: var(--teal-dd);
    color: rgba(255,255,255,0.85);
    font-size: 0.78rem;
    font-weight: 600;
    padding: var(--b2) var(--b8);
    text-align: center;
}

.gs-topplina__inni {
    max-width: var(--w);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--b4);
    flex-wrap: wrap;
}

.gs-topplina__s { opacity: 0.4; }

.gs-topplina a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* ------------------------------------------------------------
   5. HAUS
   ------------------------------------------------------------ */
.gs-haus {
    background: var(--bg-hvítur);
    border-bottom: 1px solid var(--lín);
    position: sticky;
    top: 0;
    z-index: 200;
    transition: box-shadow var(--h);
}

.gs-haus.með-skugga { box-shadow: var(--sk-2); }

.gs-haus__inni {
    max-width: var(--w);
    margin-inline: auto;
    padding: var(--b4) var(--b8);
    display: flex;
    align-items: center;
    gap: var(--b6);
}

/* Logo */
.gs-logo {
    display: flex;
    align-items: center;
    gap: var(--b3);
    text-decoration: none;
    flex-shrink: 0;
}

.gs-logo__mark { flex-shrink: 0; }

.gs-logo__texti {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.gs-logo__nafn {
    font-family: var(--font-haus);
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--myrkur);
    letter-spacing: -0.01em;
    transition: color var(--h);
}

.gs-logo__undirtitill {
    font-family: var(--font-megn);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--teal);
    margin-top: 1px;
}

.gs-logo:hover .gs-logo__nafn { color: var(--teal); }

/* Leiðsögn */
.gs-leid {
    display: flex;
    align-items: center;
    gap: var(--b6);
    margin-inline: auto;
}

.gs-leid__l {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 700;
    font-style: normal;
    color: var(--grár);
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
    letter-spacing: 0.01em;
    transition: color var(--h), border-color var(--h);
    text-decoration: none;
    line-height: 1;
}

.gs-leid__l:hover,
.gs-leid__l--on {
    color: var(--teal);
    border-bottom-color: var(--teal);
}

/* Hægrihliðar tákn */
.gs-haus__t {
    display: flex;
    align-items: center;
    gap: var(--b4);
    flex-shrink: 0;
}

.gs-haus__tengill {
    display: flex;
    align-items: center;
    color: var(--grár);
    transition: color var(--h);
}

.gs-haus__tengill:hover { color: var(--teal); }

.gs-haus__tengill--texti {
    font-size: 0.85rem;
    font-weight: 600;
}

/* Körfuhnapp */
.gs-karfa-hnapp {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--teal-xl);
    color: var(--teal);
    border-radius: var(--r);
    transition: background var(--h), color var(--h), transform var(--h2);
}

.gs-karfa-hnapp:hover {
    background: var(--teal);
    color: #fff;
    transform: scale(1.06);
}

.gs-karfa-hnapp__tala {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background: var(--teal);
    color: #fff;
    font-family: var(--font-megn);
    font-size: 0.68rem;
    font-weight: 800;
    border-radius: var(--r-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-hvítur);
    transition: transform var(--h2);
}

.gs-karfa-hnapp:hover .gs-karfa-hnapp__tala {
    background: var(--myrkur);
    transform: scale(1.1);
}

.gs-karfa-hnapp__tala--falinn { display: none; }

/* Hamborgari */
.gs-hamborgari {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 6px;
    border-radius: var(--r);
    transition: background var(--h);
}

.gs-hamborgari:hover { background: var(--teal-xl); }

.gs-hamborgari span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--myrkur);
    border-radius: 2px;
    transition: transform var(--h), opacity var(--h);
    transform-origin: center;
}

.gs-hamborgari[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gs-hamborgari[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.gs-hamborgari[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Farsíma valmynd */
.gs-mobil-vm {
    display: none;
    overflow: hidden;
    max-height: 0;
    transition: max-height 320ms ease;
    border-top: 1px solid var(--lín);
    background: var(--bg-hvítur);
}

.gs-mobil-vm.opin { max-height: 400px; }

.gs-mobil-vm nav {
    display: flex;
    flex-direction: column;
    padding: var(--b4) var(--b8) var(--b6);
    gap: 0;
}

.gs-mobil-vm nav a {
    display: block;
    padding: var(--b3) 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--grár-d);
    border-bottom: 1px solid var(--lín);
    transition: color var(--h);
}

.gs-mobil-vm nav a:last-child { border: none; }
.gs-mobil-vm nav a:hover { color: var(--teal); }


/* ------------------------------------------------------------
   6. TOAST TILKYNNING
   ------------------------------------------------------------ */
.gs-toast {
    position: fixed;
    bottom: var(--b6);
    right: var(--b6);
    z-index: 9999;
    min-width: 260px;
    max-width: 340px;
    padding: var(--b4) var(--b5);
    background: var(--myrkur);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: var(--r2);
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    transform: translateY(calc(100% + var(--b8)));
    opacity: 0;
    transition: transform 300ms cubic-bezier(0.34,1.56,0.64,1), opacity 300ms ease;
    pointer-events: none;
}

.gs-toast.sýnt { transform: translateY(0); opacity: 1; }
.gs-toast--ok   { border-left: 4px solid var(--teal); }
.gs-toast--villa { border-left: 4px solid var(--rauður); }


/* ------------------------------------------------------------
   7. TAKKAR
   ------------------------------------------------------------ */
.gs-t {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--b2);
    padding: 0.7rem 1.6rem;
    font-family: var(--font-megn);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: var(--r);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--h);
    white-space: nowrap;
}

/* Aðaltakki: teal */
.gs-t--aðal {
    background: var(--teal);
    color: #fff;
    border-color: var(--teal);
}
.gs-t--aðal:hover {
    background: var(--teal-d);
    border-color: var(--teal-d);
    color: #fff;
    box-shadow: var(--sk-teal);
    transform: translateY(-1px);
}

/* Aukatakki: útlína */
.gs-t--útlína {
    background: transparent;
    color: var(--teal);
    border-color: var(--teal);
}
.gs-t--útlína:hover {
    background: var(--teal);
    color: #fff;
    transform: translateY(-1px);
}

/* Ljós (white bg) */
.gs-t--ljós {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-color: rgba(255,255,255,0.4);
}
.gs-t--ljós:hover {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.7);
    color: #fff;
}

/* Gull */
.gs-t--gull {
    background: var(--gull);
    color: var(--myrkur);
    border-color: var(--gull);
}
.gs-t--gull:hover {
    background: #D97706;
    border-color: #D97706;
    color: #fff;
    transform: translateY(-1px);
}

/* Þurr (mörk) */
.gs-t--þurr {
    background: var(--myrkur);
    color: #fff;
    border-color: var(--myrkur);
}
.gs-t--þurr:hover {
    background: var(--grár-d);
    border-color: var(--grár-d);
    color: #fff;
}

.gs-t--fullur { width: 100%; }
.gs-t--stór   { padding: 0.85rem 2rem; font-size: 0.95rem; }
.gs-t--lítill { padding: 0.5rem 1.1rem; font-size: 0.8rem; }

.gs-t:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }


/* ------------------------------------------------------------
   8. HETJUHLUTI
   ------------------------------------------------------------ */
.gs-hetja {
    background: linear-gradient(135deg, var(--teal-dd) 0%, var(--teal) 60%, var(--teal-l) 100%);
    color: #fff;
    padding: var(--b20) var(--b8);
    position: relative;
    overflow: hidden;
}

/* Myndmynstur: opnir bókablaðar */
.gs-hetja::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.08) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.05) 0%, transparent 40%);
    pointer-events: none;
}

/* Skástrik afturvegg */
.gs-hetja::after {
    content: '';
    position: absolute;
    right: -100px;
    top: -100px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    pointer-events: none;
}

.gs-hetja__inni {
    max-width: var(--w);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--b12);
    align-items: center;
    position: relative;
    z-index: 1;
}

.gs-hetja__merki {
    display: inline-flex;
    align-items: center;
    gap: var(--b2);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    margin-bottom: var(--b5);
}

.gs-hetja__merki::before {
    content: '';
    width: 24px;
    height: 2px;
    background: rgba(255,255,255,0.5);
    display: block;
    border-radius: 2px;
}

.gs-hetja__fyrirsogn {
    font-family: var(--font-haus);
    font-size: clamp(2.8rem, 5.5vw, 5rem);
    font-weight: 700;
    line-height: 1;
    color: #fff;
    margin-bottom: var(--b5);
    letter-spacing: -0.01em;
}

.gs-hetja__fyrirsogn em {
    font-style: italic;
    color: rgba(255,255,255,0.75);
}

.gs-hetja__undirtexti {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.75;
    max-width: 46ch;
    margin-bottom: var(--b8);
    font-weight: 400;
}

.gs-hetja__takkar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--b3);
}

/* Hetju myndhlið */
.gs-hetja__myndir {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--b4);
}

.gs-hetja__bók {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--r2);
    aspect-ratio: 2/3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--b4);
    text-align: center;
    backdrop-filter: blur(4px);
    transition: transform var(--h2), background var(--h);
    cursor: default;
}

.gs-hetja__bók:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,0.18);
}

.gs-hetja__bók:first-child {
    grid-row: 1 / 3;
    aspect-ratio: unset;
}

.gs-hetja__bók-icon { font-size: 2.5rem; margin-bottom: var(--b3); }
.gs-hetja__bók-titill {
    font-family: var(--font-haus);
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    line-height: 1.3;
}


/* ------------------------------------------------------------
   9. HLUTAYFIRSKRIFT OG RIST
   ------------------------------------------------------------ */
.gs-hluti {
    padding-block: var(--b16);
}

.gs-hluti__h {
    text-align: center;
    margin-bottom: var(--b10);
}

.gs-hluti__merki {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: var(--b4);
}

.gs-hluti__fyrirsogn {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    margin-bottom: var(--b4);
}

.gs-hluti__undirtexti {
    font-size: 1rem;
    color: var(--grár);
    margin-inline: auto;
}


/* ------------------------------------------------------------
   10. VÖRUSPJALD
   ------------------------------------------------------------ */
.gs-rist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--b6);
}

.gs-vara {
    background: var(--bg-hvítur);
    border-radius: var(--r2);
    border: 1px solid var(--lín);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}

.gs-vara:hover {
    transform: translateY(-6px);
    box-shadow: var(--sk-3);
    border-color: var(--teal-xl);
}

/* Mynd */
.gs-vara__wrap { position: relative; }

.gs-vara__merki {
    position: absolute;
    top: var(--b3);
    left: var(--b3);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--b1);
}

.gs-vara__m {
    display: inline-block;
    padding: 3px 9px;
    font-family: var(--font-megn);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--r-pill);
}

.gs-vara__m--nytt  { background: var(--teal); color: #fff; }
.gs-vara__m--tilbod { background: var(--gull); color: var(--myrkur); }

.gs-vara__mynd-rammi {
    aspect-ratio: 3/4;
    background: linear-gradient(160deg, var(--teal-xl) 0%, #D1F5EF 100%);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gs-vara__mynd-rammi img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease;
}

.gs-vara:hover .gs-vara__mynd-rammi img { transform: scale(1.04); }

/* CSS bókakápa placeholder */
.gs-vara__mynd-rammi--ph {
    flex-direction: column;
    padding: var(--b5);
    text-align: center;
    gap: var(--b3);
}

.gs-vara__mynd-rammi--ph .gs-vara__ph-titill {
    font-family: var(--font-haus);
    font-size: 1rem;
    font-weight: 700;
    color: var(--teal-dd);
    line-height: 1.3;
}

.gs-vara__mynd-rammi--ph svg { color: rgba(4,150,128,0.25); }

/* Aldurslítur band */
.gs-vara__aldur-band {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(4,150,128,0.9);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: var(--b1) var(--b3);
    text-align: center;
}

/* Texti á spjaldi */
.gs-vara__texti {
    padding: var(--b5);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--b2);
}

.gs-vara__flokkur {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--grár-l);
}

.gs-vara__titill {
    font-family: var(--font-haus);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--myrkur);
    line-height: 1.25;
}

.gs-vara__titill a:hover { color: var(--teal); }

.gs-vara__hofundur {
    font-size: 0.8rem;
    color: var(--grár);
    font-style: italic;
}

/* Neðri hluti spjalds */
.gs-vara__neðri {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: var(--b4);
    border-top: 1px solid var(--lín);
    gap: var(--b3);
}

.gs-vara__verd {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--myrkur);
    font-family: var(--font-megn);
}

.gs-vara__lager { font-size: 0.7rem; color: var(--grár-l); margin-top: 1px; }
.gs-vara__lager--ok { color: var(--teal); font-weight: 600; }

/* Körfuhnapp á spjaldi */
.gs-vara__bæta {
    width: 40px;
    height: 40px;
    background: var(--teal-xl);
    color: var(--teal);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--h), color var(--h), transform var(--h2);
}

.gs-vara__bæta:hover {
    background: var(--teal);
    color: #fff;
    transform: scale(1.1);
}

.gs-vara__bæta:disabled {
    background: var(--lín);
    color: var(--grár-l);
    cursor: not-allowed;
    transform: none;
}

.gs-vara__bæta.lokið { background: var(--teal); color: #fff; }


/* ------------------------------------------------------------
   11. FLOKKA RIST (Kategórur)
   ------------------------------------------------------------ */
.gs-flokka-rist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--b4);
}

.gs-flokkur-spjald {
    background: var(--bg-hvítur);
    border: 2px solid var(--lín);
    border-radius: var(--r2);
    padding: var(--b6) var(--b5);
    text-align: center;
    transition: all 250ms ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--b3);
    text-decoration: none;
}

.gs-flokkur-spjald:hover {
    border-color: var(--teal);
    background: var(--teal-xxl);
    transform: translateY(-3px);
    box-shadow: var(--sk-teal);
}

.gs-flokkur-spjald__tákn { font-size: 2.2rem; }
.gs-flokkur-spjald__nafn {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--myrkur);
}
.gs-flokkur-spjald__fjoldi {
    font-size: 0.72rem;
    color: var(--grár-l);
}


/* ------------------------------------------------------------
   12. KYNNING BAND (Info strip)
   ------------------------------------------------------------ */
.gs-kynning {
    background: var(--teal-xxl);
    border-top: 1px solid var(--teal-xl);
    border-bottom: 1px solid var(--teal-xl);
    padding: var(--b12) var(--b8);
}

.gs-kynning__inni {
    max-width: var(--w);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--b8);
    align-items: center;
}

.gs-kynning__fyrirsogn {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    margin-bottom: var(--b3);
    color: var(--teal-dd);
}

.gs-kynning__texti {
    color: var(--grár);
    font-size: 0.95rem;
    max-width: 56ch;
}

.gs-kynning__takkar {
    display: flex;
    flex-direction: column;
    gap: var(--b3);
    flex-shrink: 0;
}


/* ------------------------------------------------------------
   13. EIGINLEIKAR RIST (Features)
   ------------------------------------------------------------ */
.gs-einkenni-rist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--b6);
}

.gs-einkenni {
    display: flex;
    flex-direction: column;
    gap: var(--b3);
    padding: var(--b6);
    background: var(--bg-hvítur);
    border: 1px solid var(--lín);
    border-radius: var(--r2);
    transition: box-shadow var(--h), border-color var(--h);
}

.gs-einkenni:hover {
    box-shadow: var(--sk-2);
    border-color: var(--teal-xl);
}

.gs-einkenni__tákn {
    width: 48px;
    height: 48px;
    background: var(--teal-xl);
    border-radius: var(--r);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--teal);
    font-size: 1.4rem;
}

.gs-einkenni__fyrirsogn {
    font-family: var(--font-haus);
    font-size: 1.15rem;
    color: var(--myrkur);
}

.gs-einkenni__texti {
    font-size: 0.88rem;
    color: var(--grár);
    line-height: 1.7;
}


/* ------------------------------------------------------------
   14. VERSLUN SÍÐUSKILALAG
   ------------------------------------------------------------ */
.vs-skipulag {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--b8);
    padding-block: var(--b10);
    align-items: start;
}

/* Sidebar */
.vs-sidebar {
    position: sticky;
    top: calc(76px + var(--b4));
    background: var(--bg-hvítur);
    border: 1px solid var(--lín);
    border-radius: var(--r2);
    overflow: hidden;
}

.vs-sidebar__hluti {
    padding: var(--b5);
    border-bottom: 1px solid var(--lín);
}
.vs-sidebar__hluti:last-child { border: none; }

.vs-sidebar__fyrirsogn {
    font-family: var(--font-megn);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--grár-l);
    margin-bottom: var(--b4);
}

.vs-sidebar__ul { display: flex; flex-direction: column; gap: var(--b1); }

.vs-sidebar__l {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--b2) var(--b3);
    border-radius: var(--r);
    font-size: 0.88rem;
    color: var(--grár-d);
    font-weight: 500;
    transition: background var(--h), color var(--h);
    text-decoration: none;
}

.vs-sidebar__l:hover { background: var(--teal-xxl); color: var(--teal-d); }

.vs-sidebar__l--on {
    background: var(--teal);
    color: #fff !important;
    font-weight: 700;
}

.vs-sidebar__t {
    font-size: 0.7rem;
    background: var(--teal-xl);
    color: var(--teal);
    padding: 1px 7px;
    border-radius: var(--r-pill);
    font-weight: 700;
}

.vs-sidebar__l--on .vs-sidebar__t {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.vs-sidebar__gátr {
    display: flex;
    align-items: center;
    gap: var(--b3);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--grár-d);
}
.vs-sidebar__gátr input { accent-color: var(--teal); }

.vs-sidebar__hreinsa {
    display: inline-flex;
    align-items: center;
    gap: var(--b2);
    font-size: 0.8rem;
    color: var(--grár);
    transition: color var(--h);
}
.vs-sidebar__hreinsa:hover { color: var(--rauður); }

/* Toppbar */
.vs-toppbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--b6);
    flex-wrap: wrap;
    gap: var(--b3);
}

.vs-toppbar__fjoldi { font-size: 0.9rem; color: var(--grár); }
.vs-toppbar__fjoldi strong { color: var(--myrkur); }

.vs-radun {
    display: flex;
    align-items: center;
    gap: var(--b3);
    font-size: 0.85rem;
    color: var(--grár);
}

.vs-radun select {
    padding: var(--b2) var(--b3);
    border: 1px solid var(--lín);
    border-radius: var(--r);
    background: var(--bg-hvítur);
    font-size: 0.85rem;
    font-family: var(--font-megn);
    color: var(--myrkur);
    cursor: pointer;
    outline: none;
    font-weight: 600;
}

.vs-radun select:focus { border-color: var(--teal); }

/* Leitarbar */
.vs-leitarbar {
    background: var(--bg-hvítur);
    border-bottom: 1px solid var(--lín);
    padding-block: var(--b4);
}

.vs-leit-reitur {
    display: flex;
    align-items: center;
    gap: var(--b3);
    border: 1.5px solid var(--lín);
    border-radius: var(--r);
    padding: var(--b2) var(--b4);
    background: var(--bg);
    transition: border-color var(--h);
}

.vs-leit-reitur:focus-within { border-color: var(--teal); }
.vs-leit-reitur svg { color: var(--grár-l); flex-shrink: 0; }
.vs-leit-reitur input {
    flex: 1;
    border: none;
    background: none;
    font-size: 0.95rem;
    color: var(--myrkur);
    outline: none;
}

/* Síuflökkur */
.vs-flökkur-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--b2);
    margin-bottom: var(--b5);
}

.vs-flökkur-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--b2);
    padding: var(--b1) var(--b4);
    background: var(--teal-xl);
    color: var(--teal-d);
    border-radius: var(--r-pill);
    font-size: 0.78rem;
    font-weight: 700;
    transition: background var(--h);
}
.vs-flökkur-pill:hover { background: var(--teal); color: #fff; }

/* Tómar niðurstöður */
.vs-tómt {
    text-align: center;
    padding: var(--b20) var(--b8);
    color: var(--grár);
}
.vs-tómt svg { margin: 0 auto var(--b6); opacity: 0.2; }
.vs-tómt h2 { color: var(--grár-d); margin-bottom: var(--b4); font-size: 1.6rem; }


/* ------------------------------------------------------------
   15. VARA SÍÐA
   ------------------------------------------------------------ */
.vr-skipulag {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: var(--b12);
    padding-block: var(--b12);
    align-items: start;
}

.vr-myndin {
    position: sticky;
    top: calc(76px + var(--b4));
}

.vr-myndin__rammi {
    aspect-ratio: 3/4;
    background: linear-gradient(160deg, var(--teal-xl) 0%, #C8F1EB 100%);
    border-radius: var(--r2);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--b4);
    padding: var(--b8);
    text-align: center;
    box-shadow: var(--sk-2);
}

.vr-myndin__rammi img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vr-myndin__ph-titill {
    font-family: var(--font-haus);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--teal-dd);
    line-height: 1.3;
}

.vr-uppl { padding-top: var(--b2); }

.vr-brauð {
    display: flex;
    align-items: center;
    gap: var(--b2);
    font-size: 0.8rem;
    color: var(--grár);
    flex-wrap: wrap;
    margin-bottom: var(--b6);
}
.vr-brauð a:hover { color: var(--teal); }
.vr-brauð span:last-child { color: var(--myrkur); font-weight: 600; }

.vr-flokkur-l {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: var(--b4);
    display: block;
}
.vr-flokkur-l:hover { opacity: 0.75; }

.vr-titill { font-size: clamp(1.8rem, 3.5vw, 2.8rem); margin-bottom: var(--b4); }

.vr-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--b2);
    margin-bottom: var(--b5);
}

.vr-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    background: var(--bg-grár);
    border-radius: var(--r-pill);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--grár-d);
}

.vr-meta-pill--teal { background: var(--teal-xl); color: var(--teal-d); }

.vr-verd {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--myrkur);
    font-family: var(--font-megn);
    margin-bottom: var(--b5);
    letter-spacing: -0.02em;
}

.vr-lager {
    display: inline-flex;
    align-items: center;
    gap: var(--b2);
    font-size: 0.82rem;
    font-weight: 700;
    padding: var(--b1) var(--b3);
    border-radius: var(--r-pill);
    margin-bottom: var(--b5);
}
.vr-lager--ok  { background: #DCFCE7; color: #166534; }
.vr-lager--nei { background: #FEE2E2; color: #991B1B; }

.vr-lysing {
    font-size: 0.95rem;
    line-height: 1.85;
    color: var(--grár-d);
    padding-block: var(--b5);
    border-block: 1px solid var(--lín);
    margin-bottom: var(--b6);
}

.vr-kaup {
    display: flex;
    gap: var(--b4);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--b6);
}

.vr-kaup__magn {
    display: flex;
    align-items: center;
    gap: var(--b3);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--grár-d);
}

.gs-magn {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--lín);
    border-radius: var(--r);
    overflow: hidden;
}

.gs-magn__hnapp {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--grár-d);
    background: var(--bg-grár);
    transition: background var(--h), color var(--h);
}
.gs-magn__hnapp:hover { background: var(--teal-xl); color: var(--teal); }

.gs-magn__tala {
    min-width: 36px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 36px;
    border-inline: 1px solid var(--lín);
    color: var(--myrkur);
}


/* ------------------------------------------------------------
   16. KARFA
   ------------------------------------------------------------ */
.kr-skipulag {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--b8);
    padding-block: var(--b10);
    align-items: start;
}

.kr-hausal {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 44px;
    gap: var(--b4);
    padding: var(--b3) var(--b5);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--grár-l);
    border-bottom: 2px solid var(--lín);
}

.kr-lína {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 44px;
    gap: var(--b4);
    align-items: center;
    padding: var(--b5);
    background: var(--bg-hvítur);
    border: 1px solid var(--lín);
    border-radius: var(--r);
    margin-bottom: var(--b3);
    transition: opacity var(--h);
}

.kr-lína__vara { display: flex; align-items: center; gap: var(--b4); }

.kr-lína__mynd {
    width: 60px;
    height: 80px;
    background: linear-gradient(160deg, var(--teal-xl) 0%, #D1F5EF 100%);
    border-radius: var(--r);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--teal);
    opacity: 0.6;
}

.kr-lína__titill { font-family: var(--font-haus); font-weight: 700; font-size: 1rem; color: var(--myrkur); }
.kr-lína__hofundur { font-size: 0.78rem; color: var(--grár); font-style: italic; margin-top: 2px; }
.kr-lína__verd { font-size: 0.9rem; color: var(--grár-d); }
.kr-lína__samtals { font-weight: 800; font-size: 0.95rem; color: var(--myrkur); }

/* Körfu magn */
.kr-magn {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--lín);
    border-radius: var(--r);
    overflow: hidden;
    width: fit-content;
}

.kr-magn__hnapp {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--grár-d);
    background: var(--bg-grár);
    transition: background var(--h), color var(--h);
}
.kr-magn__hnapp:hover { background: var(--teal-xl); color: var(--teal); }

.kr-magn__tala {
    min-width: 32px;
    text-align: center;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 30px;
    border-inline: 1px solid var(--lín);
    color: var(--myrkur);
}

.kr-eyða {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--grár-l);
    border-radius: 50%;
    transition: background var(--h), color var(--h);
}
.kr-eyða:hover { background: #FEE2E2; color: var(--rauður); }

/* Samantekt */
.kr-samantekt {
    position: sticky;
    top: calc(76px + var(--b4));
    background: var(--bg-hvítur);
    border: 1px solid var(--lín);
    border-radius: var(--r2);
    overflow: hidden;
}

.kr-samantekt__h {
    padding: var(--b5) var(--b6);
    font-size: 1.1rem;
    border-bottom: 1px solid var(--lín);
    background: var(--teal-xxl);
}

.kr-samantekt__body { padding: var(--b5) var(--b6); }

.kr-samantekt__lína {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    padding-block: var(--b3);
    border-bottom: 1px solid var(--lín);
}

.kr-samantekt__lína:last-of-type { border: none; }

.kr-samantekt__lína--heildar {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--myrkur);
    padding-top: var(--b5);
    border-top: 2px solid var(--myrkur) !important;
    margin-top: var(--b2);
}

.kr-sending-hint {
    display: flex;
    align-items: center;
    gap: var(--b2);
    font-size: 0.78rem;
    padding: var(--b3);
    background: var(--teal-xxl);
    border-radius: var(--r);
    color: var(--teal-d);
    margin-block: var(--b3);
    font-weight: 600;
}
.kr-sending-hint svg { flex-shrink: 0; }
.kr-sending-hint--ok { background: #DCFCE7; color: #166534; }

/* Tóm körfa */
.kr-tom {
    text-align: center;
    padding: var(--b20) var(--b8);
    grid-column: 1 / -1;
}
.kr-tom__tákn { font-size: 5rem; margin-bottom: var(--b6); opacity: 0.3; }
.kr-tom h2 { font-size: 1.8rem; margin-bottom: var(--b4); color: var(--grár-d); }
.kr-tom p { color: var(--grár); }


/* ------------------------------------------------------------
   17. FORM
   ------------------------------------------------------------ */
.gs-form-gr {
    margin-bottom: var(--b5);
}

.gs-form-gr label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--grár-d);
    margin-bottom: var(--b2);
}

.gs-form-gr input,
.gs-form-gr textarea,
.gs-form-gr select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    font-family: var(--font-megn);
    color: var(--myrkur);
    background: var(--bg-hvítur);
    border: 1.5px solid var(--lín);
    border-radius: var(--r);
    outline: none;
    transition: border-color var(--h), box-shadow var(--h);
    -webkit-appearance: none;
}

.gs-form-gr input:focus,
.gs-form-gr textarea:focus,
.gs-form-gr select:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(4,150,128,0.12);
}

.gs-form-gr textarea { resize: vertical; min-height: 120px; }

.gs-nauðsyn { color: var(--rauður); }


/* ------------------------------------------------------------
   18. SKILABOÐ
   ------------------------------------------------------------ */
.gs-villa {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #991B1B;
    padding: var(--b4) var(--b5);
    border-radius: var(--r);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: var(--b5);
}

.gs-árangur {
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    color: #166534;
    padding: var(--b4) var(--b5);
    border-radius: var(--r);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: var(--b5);
}


/* ------------------------------------------------------------
   19. SÍÐUFYRIRSÖGN
   ------------------------------------------------------------ */
.gs-sida-h {
    background: var(--bg-hvítur);
    border-bottom: 1px solid var(--lín);
    padding: var(--b10) var(--b8);
    text-align: center;
}

.gs-sida-h h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: var(--b3);
    color: var(--myrkur);
}

.gs-sida-h p {
    color: var(--grár);
    font-size: 1rem;
    margin-inline: auto;
}


/* ------------------------------------------------------------
   20. FÓTUR
   ------------------------------------------------------------ */
.gs-fotur {
    background: var(--myrkur);
    color: rgba(255,255,255,0.65);
    margin-top: var(--b20);
}

.gs-fotur__efri {
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.gs-fotur__efri .gs-w {
    padding-block: var(--b12);
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: var(--b10);
}

.gs-fotur__d--aðal { }

.gs-fotur__logo {
    display: flex;
    align-items: center;
    gap: var(--b3);
    font-family: var(--font-haus);
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: var(--b5);
    text-decoration: none;
    transition: color var(--h);
}

.gs-fotur__logo:hover { color: var(--teal-l); }

.gs-fotur__lysing {
    font-size: 0.86rem;
    line-height: 1.75;
    max-width: 36ch;
    margin-bottom: var(--b5);
}

.gs-fotur__netfang {
    display: inline-flex;
    align-items: center;
    gap: var(--b2);
    font-size: 0.82rem;
    color: var(--teal-l);
    transition: color var(--h);
}
.gs-fotur__netfang:hover { color: #fff; }

.gs-fotur__h {
    font-family: var(--font-megn);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-bottom: var(--b5);
}

.gs-fotur__ul {
    display: flex;
    flex-direction: column;
    gap: var(--b3);
}

.gs-fotur__ul li { display: flex; align-items: flex-start; gap: var(--b2); }
.gs-fotur__ul svg { flex-shrink: 0; margin-top: 3px; opacity: 0.5; color: var(--teal-l); }

.gs-fotur__ul a,
.gs-fotur__ul span {
    font-size: 0.86rem;
    color: rgba(255,255,255,0.55);
    transition: color var(--h);
}
.gs-fotur__ul a:hover { color: #fff; }

.gs-fotur__miðja {
    border-top: 1px solid rgba(255,255,255,0.06);
}
.gs-fotur__miðja-inni {
    padding-block: var(--b5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--b4);
}
.gs-fotur__lagaleg {
    display: flex;
    align-items: center;
    gap: var(--b3);
    flex-wrap: wrap;
}
.gs-fotur__lagaleg a {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.35);
    text-decoration: none;
    transition: color var(--h);
}
.gs-fotur__lagaleg a:hover { color: rgba(255,255,255,0.75); }
.gs-fotur__s { color: rgba(255,255,255,0.15); font-size: 0.78rem; }
.gs-fotur__social { display: flex; gap: var(--b4); align-items: center; }
.gs-fotur__social-l {
    display: inline-flex;
    align-items: center;
    gap: var(--b2);
    font-size: 0.78rem;
    color: rgba(255,255,255,0.35);
    text-decoration: none;
    transition: color var(--h);
}
.gs-fotur__social-l:hover { color: var(--teal-l); }

.gs-fotur__neðri {
    border-top: 1px solid rgba(255,255,255,0.06);
}

.gs-fotur__neðri-inni {
    padding-block: var(--b5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--b4);
}

.gs-fotur__neðri-inni p {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.3);
    max-width: none;
}


/* ------------------------------------------------------------
   21. HLEÐSLU BÚNAÐUR
   ------------------------------------------------------------ */
.gs-hlaðinn {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: snúast 0.65s linear infinite;
}

@keyframes snúast { to { transform: rotate(360deg); } }


/* ------------------------------------------------------------
   22. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
    .gs-fotur__efri .gs-w {
        grid-template-columns: 1fr 1fr;
        gap: var(--b8);
    }

    .gs-hetja__inni { grid-template-columns: 1fr; }
    .gs-hetja__myndir { display: none; }
    .gs-kynning__inni { grid-template-columns: 1fr; text-align: center; }
    .gs-kynning__texti { margin-inline: auto; }
    .gs-kynning__takkar { flex-direction: row; justify-content: center; }
}

@media (max-width: 900px) {
    .vs-skipulag { grid-template-columns: 1fr; }
    .vs-sidebar { position: static; }
    .vr-skipulag { grid-template-columns: 1fr; }
    .vr-myndin { position: static; }
    .kr-skipulag { grid-template-columns: 1fr; }
    .kr-samantekt { position: static; }
    .kr-hausal { display: none; }
    .kr-lína { grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; }
    .kr-lína__vara { grid-column: 1 / -1; }
    .kr-lína__samtals { font-size: 1rem; }
}

@media (max-width: 768px) {
    :root {
        --b8:  1.25rem;
        --b10: 2rem;
        --b12: 2.5rem;
        --b16: 3rem;
        --b20: 4rem;
    }

    .gs-haus__inni { padding: var(--b3) var(--b5); }
    .gs-leid { display: none; }
    .gs-hamborgari { display: flex; }
    .gs-mobil-vm { display: block; }

    .gs-topplina__inni { flex-direction: column; gap: var(--b2); }
    .gs-topplina__s { display: none; }

    .gs-rist { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--b4); }
    .gs-flokka-rist { grid-template-columns: repeat(3, 1fr); gap: var(--b3); }
    .gs-einkenni-rist { grid-template-columns: 1fr 1fr; }

    .gs-fotur__efri .gs-w { grid-template-columns: 1fr; }
    .gs-fotur__neðri-inni { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
    .gs-rist { grid-template-columns: 1fr 1fr; gap: var(--b3); }
    .gs-flokka-rist { grid-template-columns: 1fr 1fr; }
    .gs-einkenni-rist { grid-template-columns: 1fr; }
    .gs-hetja__takkar { flex-direction: column; }
    .gs-hetja__takkar .gs-t { width: 100%; }
}