:root {
  --bok-blekk: #24383a;
  --bok-gronn: #397776;
  --bok-gronn-lys: #eaf4f2;
  --bok-krem: #fbf7ef;
  --bok-korall: #bd5962;
  --bok-kant: #dce6e3;
}

.bokhandel-side { color: var(--bok-blekk); }

.bokhandel-topp {
  align-items: center;
  background: linear-gradient(135deg, var(--bok-gronn-lys), var(--bok-krem));
  border: 1px solid var(--bok-kant);
  border-radius: 1.25rem;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 3rem);
}

.bokhandel-topp h1 { font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -.04em; }
.bokhandel-topp p { font-size: 1.05rem; max-width: 42rem; }
.bokhandel-merkelapp { color: var(--bok-gronn); display: block; font-size: .75rem; font-weight: 700; letter-spacing: .12em; margin-bottom: .5rem; text-transform: uppercase; }
.bokhandel-toppikon { color: var(--bok-gronn); font-size: clamp(3rem, 8vw, 6rem); opacity: .18; }

.leveringsvalg { background: #fff; border: 1px solid var(--bok-kant); border-radius: 1.25rem; padding: clamp(1.25rem, 4vw, 2.5rem); }
.leveringsvalg h2, .bokhandel-seksjonstittel { font-size: 1.4rem; font-weight: 700; }

.leveringskort {
  align-items: center;
  background: var(--bok-krem);
  border: 2px solid transparent;
  border-radius: 1rem;
  color: var(--bok-blekk);
  display: flex;
  gap: 1rem;
  min-height: 8rem;
  padding: 1.25rem;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}

.leveringskort:hover, .leveringskort:focus-visible { border-color: var(--bok-gronn); color: var(--bok-blekk); transform: translateY(-2px); }
.leveringskort i { color: var(--bok-gronn); font-size: 1.75rem; width: 2rem; }
.leveringskort strong, .leveringskort small { display: block; }
.leveringskort small { color: #5d6d6e; margin-top: .25rem; }

.bok-kort { border: 1px solid var(--bok-kant); border-radius: 1rem; box-shadow: 0 .25rem 1rem rgba(36, 56, 58, .06); overflow: hidden; transition: box-shadow .15s ease, transform .15s ease; }
.bok-kort:not(.bok-kort-utvalgt):hover { box-shadow: 0 .6rem 1.5rem rgba(36, 56, 58, .12); transform: translateY(-3px); }
.bok-kort > a:hover, .bok-kort > a:focus { background: transparent; }
.bok-kort img { aspect-ratio: 2 / 3; object-fit: contain; }
.bok-utvalgt-tittel { font-size: clamp(1.75rem, 3vw, 2.4rem); font-weight: 700; line-height: 1.15; }
.bok-tittel { color: var(--bok-blekk); font-weight: 700; line-height: 1.3; text-decoration: none; }
.bok-tittel:hover { color: var(--bok-gronn); }
.tilbudspris { color: var(--bok-korall); font-size: 1.1rem; margin-left: .4rem; }

.handlekurv-kort { background: #fff; border: 1px solid var(--bok-kant); border-radius: 1rem; box-shadow: 0 .4rem 1.5rem rgba(36, 56, 58, .08); padding: 1.25rem; position: sticky; top: 1rem; }
.handlekurv-tittel { align-items: center; border-bottom: 1px solid var(--bok-kant); display: flex; gap: .65rem; margin-bottom: 1rem; padding-bottom: .75rem; }
.handlekurv-tittel h2 { font-size: 1.25rem; margin: 0; }
.handlekurv-tittel i { color: var(--bok-gronn); }
.handlekurv-tabell { font-size: .95rem; margin-bottom: .5rem; }
.handlekurv-tabell th { border-bottom: 1px solid var(--bok-kant); color: #667475; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.handlekurv-tabell td, .handlekurv-tabell th { padding: .65rem .35rem; vertical-align: middle; }
.handlekurv-frakt td { border-top: 1px solid var(--bok-kant); color: var(--bok-gronn); font-weight: 600; }
.handlekurv-total td { border-top: 1px solid var(--bok-kant); font-size: 1.1rem; font-weight: 700; padding-top: .9rem; }

.handlekurv-slett { appearance: none; background: transparent; border: 0; color: #b64b55; padding: .35rem; }
.handlekurv-slett:hover { color: #812f37; }

.handlekurv-kasseknapp { align-items: center; appearance: none; background: var(--bok-gronn); border: 0; border-radius: .7rem; color: #fff; display: flex; font: inherit; font-weight: 700; gap: .6rem; justify-content: center; margin-top: .75rem; min-height: 3rem; padding: .7rem 1rem; width: 100%; }
.handlekurv-kasseknapp:hover { background: #2d6261; }

.handlekurv-levering { align-items: center; background: var(--bok-gronn-lys); border-radius: .7rem; display: flex; font-size: .875rem; gap: .5rem; margin-top: .75rem; padding: .7rem .8rem; }
.handlekurv-levering i { color: var(--bok-gronn); }
.handlekurv-levering span { flex: 1; }
.handlekurv-levering a { color: var(--bok-gronn); font-weight: 600; }

.bestilling-handlinger {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.annen-betaler-knapp {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--bok-gronn);
  display: inline-flex;
  font: inherit;
  font-weight: 600;
  gap: .55rem;
  padding: .25rem 0;
  text-align: left;
}

.annen-betaler-knapp:hover {
  color: var(--bok-blekk);
  text-decoration: underline;
}

.annen-betaler-knapp i {
  font-size: .75rem;
  transition: transform .15s ease;
}

.annen-betaler-knapp[aria-expanded="true"] i {
  transform: rotate(90deg);
}

.bestill-knapp {
  align-items: center;
  appearance: none;
  background: var(--bok-gronn);
  border: 0;
  border-radius: .75rem;
  box-shadow: 0 .3rem .8rem rgba(36, 56, 58, .16);
  color: #fff;
  display: inline-flex;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  gap: .75rem;
  justify-content: center;
  min-height: 3.25rem;
  padding: .8rem 1.25rem;
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.bestill-knapp:hover {
  background: #2d6261;
  box-shadow: 0 .45rem 1rem rgba(36, 56, 58, .22);
  transform: translateY(-1px);
}

.bestill-knapp:focus-visible,
.annen-betaler-knapp:focus-visible {
  outline: 3px solid rgba(57, 119, 118, .3);
  outline-offset: 3px;
}

@media (max-width: 575.98px) {
  .bokhandel-toppikon { display: none; }
  .bokhandel-topp { padding: 1.35rem; }
  .bestill-knapp { width: 100%; }
}