/* ── Tasty Corner design tokens ──
   Brand red #D9273F (logo package) — used ONLY for filled CTAs / small accents, never as running text.
   Accent taupe #B0A09B — header + footer surfaces (the logo's cream needs a mid-tone behind it).
   Brand cream #FFF0C9 (logo package) — badges, footer headings.
   Landing/header/footer font: Nunito Sans (baryl.dk measured). Ordering pages: system-ui (bestilonline measured). */
:root {
  --tc-primary: #D9273F;
  --tc-primary-dark: #B81F34;
  --tc-accent: #B0A09B;
  --tc-accent-light: #E6DFDC;
  --tc-accent-dark: #8E7E79;
  --tc-cream: #FFF0C9;
  --tc-ink: #1C1C1C;
  --tc-ink-soft: #3A322F;
  --tc-bg: #F7F7F7;
  --tc-font-brand: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --tc-font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* legacy chickenwaves variables, remapped to the Tasty Corner palette */
  --cnc-red: var(--tc-primary-dark);
  --cnc-orange: var(--tc-primary);
  --cnc-orange-light: var(--tc-primary);
  --cnc-dark: var(--tc-primary);
  --cnc-light: #fff;
}

/* ═══ ALL BUTTONS — CONSISTENT ORANGE + BLACK TEXT ═══ */
.btn-green,
.btn-grey:hover,
.badge.badge-green,
.custom-control-input:checked ~ .custom-control-label::before,
.btn-green-line:hover,
.btn-theme,
.btn-primary,
.section-promo,
.layer-content,
.add_to_cart,
button.add_to_cart,
.el-button--success,
.el-button--primary {
  background: var(--cnc-orange) !important;
  border-color: var(--cnc-orange) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.btn-green:focus,
.btn-green:hover,
.btn-theme:hover,
.btn-primary:hover,
.add_to_cart:hover,
.el-button--success:hover,
.el-button--primary:hover {
  background: var(--cnc-red) !important;
  border-color: var(--cnc-red) !important;
  color: #fff !important;
}

/* Size selector pills — orange outline, not black */
.btn-black.rounded-pill,
.quantity a.rounded-pill,
.item-size-button,
.rounded-pill.active,
.rounded-pill[class*="btn"] {
  background: var(--cnc-dark) !important;
  border-color: var(--cnc-dark) !important;
  color: #fff !important;
}

/* Green text → Orange */
.text-green,
a:hover,
ul.top-menu a:hover,
.list-inline a:hover,
.menu-category a:hover,
.siderbar-menu li.active a,
#menu-category .col a.active,
.btn.normal:hover,
.menu-carousel a.active,
.menu-carousel a:hover {
  color: var(--cnc-orange) !important;
}

/* Green borders → Orange */
.btn-green-line,
.border-green {
  border: 1px solid var(--cnc-orange) !important;
  color: var(--cnc-orange) !important;
}
.btn-green-circle,
.btn-green-circle:hover {
  background: var(--cnc-orange) !important;
  border-color: var(--cnc-orange) !important;
}
.btn-white {
  background: #fff;
  color: var(--cnc-orange) !important;
}
.badge-green {
  background: var(--cnc-orange) !important;
}

/* ═══ BLACK/RED BUTTONS — ALWAYS white text ═══ */
.btn-black,
.btn.btn-black,
a.btn-black,
button.btn-black,
.btn-black.w-100,
.drawer-menu .btn-black,
.modal .btn-black,
.modal-footer .btn-black,
.rounded-button-icon:hover {
  background: var(--cnc-red) !important;
  color: #fff !important;
}
.btn-black:focus,
.btn-black:hover,
.btn.btn-black:hover {
  background: var(--cnc-dark) !important;
  color: #fff !important;
}
/* Disabled green/orange buttons — keep readable */
.btn-green:disabled,
.btn-green[disabled]:not([disabled="false"]),
.btn.btn-green:disabled {
  background: var(--cnc-orange) !important;
  color: #fff !important;
  opacity: 0.6;
}
/* Til kassen / checkout button — always bold orange */
.btn-green.w-100:not(:disabled),
.cart-summary .btn-green,
.sticky-cart .btn-green {
  background: var(--cnc-orange) !important;
  color: #fff !important;
  opacity: 1 !important;
  font-weight: 700;
}

/* ═══ BRAND FONT + SAFE HOVER (landing, header, footer) ═══ */
body { font-family: var(--tc-font-brand); }
a:hover { color: var(--tc-primary-dark) !important; }
/* on primary-coloured surfaces (header, footer, drawer CTA) hover must stay readable */
.cnc-footer a:hover, .cnc-footer a:hover * { color: var(--tc-primary-dark) !important; }
/* filled footer buttons keep white text on hover (never red on red) */
.cnc-footer a.cnc-dir-btn:hover, .cnc-footer .cnc-socials a:hover, .cnc-footer .cnc-socials a:hover * { color: #fff !important; }
#top-navigation a:not(.tc-cta):not(.tc-drawer-cta):hover, #top-navigation a:not(.tc-cta):not(.tc-drawer-cta):hover * { color: var(--tc-ink) !important; }
/* The icon chips are dark (--tc-ink-soft) with white glyphs, so their own text colour must be
   white too — the inherited ink measured 1.4:1 against the chip. Nothing visible used it (the
   glyphs are SVG strokes and the badge sets its own colour) but any text node added later would
   have been invisible. Applies at rest and on hover; the ink hover rule is for the light header. */
#top-navigation .cart-handle, #top-navigation .cart-handle *,
#top-navigation .hamburger, #top-navigation .hamburger *,
ul#vue-cart-preview.top-menu > li > a, ul#vue-cart-preview.top-menu > li > a *,
#top-navigation .cart-handle:hover, #top-navigation .cart-handle:hover *,
#top-navigation .hamburger:hover, #top-navigation .hamburger:hover * { color: #fff !important; }

#top-navigation .tc-cta:hover, #top-navigation .tc-cta:hover * { color: #fff !important; }
#top-navigation .tc-cta:hover .tc-cta-badge { color: var(--tc-primary-dark) !important; }

/* ═══ HEADER — baryl.dk layout: logo | centred CTA | icons (measured: 108px tall, 19px 48px padding) ═══ */
#top-navigation {
  /* Same surface as the footer (--tc-accent-light). The mid taupe read as a heavy band against
     the light landing tiles and made the dark text feel harsh; header and footer now bracket the
     page in the same calm tone. */
  background: var(--tc-accent-light) !important;
  border-bottom: 0 !important;
  padding: 0 !important;
}
#top-navigation > .tc-header {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 19px 48px;
  min-height: 108px;
}
#top-navigation .tc-header-left  { display: flex; align-items: center; justify-content: flex-start; }
#top-navigation .tc-header-center{ display: flex; align-items: center; justify-content: center; }
#top-navigation .tc-header-right { display: flex; align-items: center; justify-content: flex-end; }
/* The logo is a cream ring + red script on transparency, which disappeared against the light
   header. It now sits on a dark rounded tile — the same treatment as the app icon — so the ring
   and the script both read. Sized so the tile matches the 40px icon chips' visual weight. */
#top-navigation .top-logo img {
  height: 68px; width: auto; max-height: 68px; display: block;
  background: var(--tc-ink-soft);
  border-radius: 16px;
  padding: 7px 9px;
  box-sizing: border-box;
}
#top-navigation .top-logo, #top-navigation .top-logo a { display: block; line-height: 0; }

/* Centre CTA — baryl button: 14px uppercase, 0.18em tracking, 10px 28px, 1px border, square */
.tc-cta,
.tc-cta:link, .tc-cta:visited {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--tc-font-brand);
  font-size: 14px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; line-height: 18px;
  color: #fff !important;
  background: var(--tc-primary);
  border: 1px solid var(--tc-primary);
  padding: 13px 28px;
  border-radius: 0;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.tc-cta .tc-cta-badge, .tc-photo-cta .tc-cta-badge {
  font-size: 12px; letter-spacing: .08em; font-weight: 800;
  background: var(--tc-cream); color: var(--tc-primary-dark);
  padding: 2px 8px;
}
.tc-cta:hover, .tc-cta:focus {
  background: var(--tc-primary-dark);
  border-color: var(--tc-primary-dark);
  color: #fff !important;
  text-decoration: none !important;
}

/* Right icons: person, bag, hamburger — white, 24px, 20px apart (baryl: 24px icons, 20px gap) */
ul#vue-cart-preview.top-menu {
  display: flex !important; align-items: center; gap: 20px;
  margin: 0 !important; padding: 0 !important; list-style: none;
}
ul#vue-cart-preview.top-menu > li { margin: 0 !important; padding: 0 !important; display: flex; align-items: center; }
ul#vue-cart-preview.top-menu > li > a,
ul#vue-cart-preview.top-menu > li > a:hover,
ul#vue-cart-preview.top-menu .dropdown > a,
ul#vue-cart-preview.top-menu .dropdown > a:hover {
  /* These anchors ARE the dark chips (background set below), so their text colour is white, not
     ink — ink measured 1.4:1 against the chip. */
  color: #fff !important; padding: 0 !important; line-height: 0; display: inline-flex; align-items: center;
}
.tc-icon { width: 22px; height: 22px; display: block; stroke: #fff; fill: none; stroke-width: 1.8; }
/* header buttons: dark rounded squares with white glyphs (readable on the taupe header) */
ul#vue-cart-preview.top-menu > li > a,
ul#vue-cart-preview.top-menu .dropdown > a,
#top-navigation .hamburger {
  width: 40px; height: 40px; border-radius: 10px; background: var(--tc-ink-soft);
  display: inline-flex !important; align-items: center; justify-content: center; line-height: 0;
  transition: background .15s;
}
ul#vue-cart-preview.top-menu > li > a:hover,
ul#vue-cart-preview.top-menu .dropdown > a:hover,
#top-navigation .hamburger:hover { background: var(--tc-primary); }
ul#vue-cart-preview.top-menu > li > a:hover .tc-icon,
ul#vue-cart-preview.top-menu .dropdown > a:hover .tc-icon { stroke: #fff; }
#top-navigation .hamburger-inner, #top-navigation .hamburger-inner::before, #top-navigation .hamburger-inner::after { background-color: #fff !important; }
a.cart-handle { position: relative; padding: 0 !important; }
.cart-handle span.badge {
  position: absolute; right: -7px; top: -7px; bottom: auto;
  background: var(--tc-primary) !important; color: #fff !important; border: 2px solid var(--tc-accent-light);
  font-weight: 800; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; font-size: 11px;
}
#top-navigation .hamburger { padding: 0; }
#top-navigation .hamburger-box { width: 22px; height: 18px; display: block; }
#top-navigation .hamburger-inner,
#top-navigation .hamburger-inner::before,
#top-navigation .hamburger-inner::after { background-color: #fff !important; width: 22px; height: 2px; }
#top-navigation .dropdown-toggle::after { display: none; }
#top-navigation .dropdown-menu { font-family: var(--tc-font-brand); }
/* Account dropdown. The vendor draws each item's icon as a background IMAGE at 10px with a 20px
   text-indent, so the label ran into the icon; and our old hover rule used the `background`
   shorthand, which reset background-image — the icon vanished and the row jumped on hover.
   Icons now sit in a fixed 44px gutter and hover only changes background-COLOR. */
#top-navigation .dropdown-menu {
  min-width: 232px; padding: 6px; border: 1px solid #ECE6E2; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(28,28,28,.14);
}
#top-navigation .dropdown-menu a,
#top-navigation .dropdown-menu a.dropdown-item {
  display: block; color: var(--tc-ink) !important; text-indent: 0 !important;
  padding: 10px 14px 10px 44px !important; border-radius: 8px;
  font-size: 14px; font-weight: 600; line-height: 20px; white-space: nowrap;
  background-repeat: no-repeat !important; background-position: 14px center !important; background-size: 20px 20px !important;
  transition: background-color .12s, color .12s;
}
#top-navigation .dropdown-menu a:hover,
#top-navigation .dropdown-menu a:focus,
#top-navigation .dropdown-menu a:active {
  background-color: var(--tc-accent-light) !important; color: var(--tc-ink) !important; text-decoration: none !important;
}
#top-navigation .dropdown-menu a.with-icon-logout { margin-top: 4px; border-top: 1px solid #ECE6E2; border-radius: 0 0 8px 8px; }
/* Drawer (hamburger menu) stays light with dark text */
.el-drawer.drawer-menu { font-family: var(--tc-font-brand); }
.el-drawer.drawer-menu a { color: var(--tc-ink) !important; }
.el-drawer.drawer-menu a:not(.tc-drawer-cta):hover { color: var(--tc-primary) !important; }
.el-drawer.drawer-menu .tc-drawer-cta:hover { background: var(--tc-primary-dark); color: #fff !important; }

/* Mobile header (baryl mobile: 82px tall, 16px 20px padding, 50px logo, 12px CTA) */
@media (max-width: 991px) {
  #top-navigation > .tc-header { padding: 16px 20px; min-height: 82px; gap: 8px; grid-template-columns: auto 1fr auto; }
  #top-navigation .top-logo img { height: 48px; max-height: 48px; max-width: 110px; object-fit: contain; object-position: center; border-radius: 12px; padding: 5px 7px; }
  .tc-cta, .tc-cta:link, .tc-cta:visited { font-size: 12px; letter-spacing: .12em; padding: 8px 12px; gap: 6px; }
  .tc-cta .tc-cta-badge, .tc-photo-cta .tc-cta-badge { font-size: 10px; padding: 1px 6px; }
  ul#vue-cart-preview.top-menu { gap: 14px; }
}
/* ≤359px (iPhone SE/5-class widths): measured at 320px the header needed 350px — 52px logo,
   122px CTA, three 40px chips with 20px gaps, 20px side padding — so the page scrolled sideways
   and the bag badge sat on the hamburger. Everything shrinks a notch and the CTA keeps only its
   short label + badge. Budget: 12+44+8+~92+8+(3×34+2×8)+12 = 294px. */
@media (max-width: 359px) {
  #top-navigation > .tc-header { padding: 12px 12px; gap: 6px; min-height: 68px; }
  #top-navigation .top-logo img { height: 44px; max-height: 44px; max-width: 44px; padding: 4px 5px; border-radius: 10px; }
  .tc-cta, .tc-cta:link, .tc-cta:visited { font-size: 11px; letter-spacing: .08em; padding: 8px 9px; gap: 5px; }
  .tc-cta .tc-cta-badge, .tc-photo-cta .tc-cta-badge { font-size: 9px; padding: 1px 5px; }
  ul#vue-cart-preview.top-menu { gap: 8px; }
  ul#vue-cart-preview.top-menu > li > a, ul#vue-cart-preview.top-menu .dropdown > a, #top-navigation .hamburger { width: 34px; height: 34px; border-radius: 9px; }
  .tc-icon { width: 19px; height: 19px; }
  #top-navigation .cart-handle .badge { width: 18px; height: 18px; min-width: 18px; font-size: 10px !important; right: -7px; top: -7px; }
}
.tc-cta .tc-cta-short { display: none; }
@media (max-width: 480px) {
  .tc-cta .tc-cta-text { display: none; }
  .tc-cta .tc-cta-short { display: inline; }
}

/* ═══ LANDING — baryl.dk-style photo grid that ALWAYS fits one screen (header + grid = viewport) ═══ */
.tc-landing { background: var(--tc-bg); }
.tc-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 4px;
  height: calc(100vh - 108px);
  height: calc(100dvh - 108px);
  min-height: 420px;
  padding: 0; margin: 0;
}
.tc-photo-tile { position: relative; overflow: hidden; background: var(--tc-accent-light); margin: 0; min-height: 0; }
.tc-photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-photo-grid .tc-photo-tile:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.tc-photo-grid .tc-photo-tile:nth-child(2) { grid-column: 2; grid-row: 1; }
.tc-photo-grid .tc-photo-tile:nth-child(3) { grid-column: 2; grid-row: 2; }
.tc-photo-grid .tc-photo-tile:nth-child(4) { grid-column: 3; grid-row: 1 / span 2; }
.tc-photo-grid .tc-photo-tile:nth-child(5) { grid-column: 1; grid-row: 3; }
.tc-photo-grid .tc-photo-tile:nth-child(6) { grid-column: 1; grid-row: 4; }
.tc-photo-grid .tc-photo-tile:nth-child(7) { grid-column: 2; grid-row: 3 / span 2; }
.tc-photo-grid .tc-photo-tile:nth-child(8) { grid-column: 3; grid-row: 3 / span 2; }
/* Sticky "Bestil online →": fixed, centred, visible on every viewport without scrolling */
.tc-photo-cta,
.tc-photo-cta:link, .tc-photo-cta:visited {
  position: fixed; right: 32px; bottom: 32px;
  z-index: 1020;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--tc-font-brand); font-size: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #fff !important; background: var(--tc-primary);
  padding: 16px 36px; border: 1px solid var(--tc-primary); border-radius: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  text-decoration: none !important; white-space: nowrap;
}
.tc-photo-cta:hover, .tc-photo-cta:focus { background: var(--tc-primary-dark); border-color: var(--tc-primary-dark); color: #fff !important; text-decoration: none !important; }
@media (max-width: 991px) {
  .tc-photo-grid { height: calc(100vh - 82px); height: calc(100dvh - 82px); }
}
@media (max-width: 767px) {
  .tc-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 3px; min-height: 360px; }
  .tc-photo-grid .tc-photo-tile:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
  .tc-photo-grid .tc-photo-tile:nth-child(2) { grid-column: 2; grid-row: 1; }
  .tc-photo-grid .tc-photo-tile:nth-child(3) { grid-column: 2; grid-row: 2 / span 2; }
  .tc-photo-grid .tc-photo-tile:nth-child(4) { grid-column: 1; grid-row: 3; }
  .tc-photo-grid .tc-photo-tile:nth-child(5) { grid-column: 1; grid-row: 4 / span 2; }
  .tc-photo-grid .tc-photo-tile:nth-child(6) { grid-column: 2; grid-row: 4; }
  .tc-photo-grid .tc-photo-tile:nth-child(7) { grid-column: 2; grid-row: 5 / span 2; }
  .tc-photo-grid .tc-photo-tile:nth-child(8) { grid-column: 1; grid-row: 6; }
  .tc-photo-cta, .tc-photo-cta:link, .tc-photo-cta:visited {
    right: auto; left: 50%; transform: translateX(-50%);
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    font-size: 14px; padding: 16px 28px; min-height: 48px;
    max-width: calc(100% - 40px);
  }
}

/* Hide distance label */
li:has(.zmdi-pin),
[class*="distance"],
.info-items-dot-separator + li:has(.zmdi-pin) {
  display: none !important;
}

/* Hide top search bar */
#vue-cart-preview li a[href*="search"],
#vue-cart-preview li:has(a[href*="search"]),
.widget-search,
a[href="/search"] {
  display: none !important;
}

/* Hide static map image (403 from Google — we use embed instead) */
.section-address img[src*="staticmap"],
img[src*="googleapis.com/maps/api/staticmap"] {
  display: none !important;
}

/* Mobile sidebar / drawer menu */
.drawer-menu a,
.drawer-menu li a,
.drawer-menu-mobile a,
.drawer-menu-mobile li a,
.el-drawer a,
.el-drawer span,
.el-drawer li,
.el-drawer p {
  color: var(--cnc-dark) !important;
}
.drawer-menu a:hover,
.drawer-menu li a:hover,
.drawer-menu-mobile a:hover,
.el-drawer a:hover {
  color: var(--cnc-orange) !important;
}
.el-drawer__header span,
.drawer-menu #el-drawer__title {
  color: var(--cnc-dark) !important;
}
/* Drawer — force all content dark and readable */
.el-drawer i,
.drawer-menu i,
.drawer-menu-mobile i {
  color: var(--cnc-dark) !important;
}
.el-drawer img,
.drawer-menu img {
  filter: none !important;
}
/* Override the #top-navigation white text for drawer */
.el-drawer,
.el-drawer *,
.el-drawer a,
.el-drawer span,
.el-drawer li,
.el-drawer p,
.el-drawer div,
.el-overlay .el-drawer *,
.el-overlay a,
.el-overlay li {
  color: #333 !important;
}
.el-drawer a:hover {
  color: var(--cnc-orange) !important;
}

/* All modals/dialogs — force dark readable text */
.modal, .modal *, .modal select, .modal option,
#orderTypeTime, #orderTypeTime *,
#orderTypeTime select, #orderTypeTime option {
  color: #333 !important;
}
.modal select, #orderTypeTime select {
  background: #fff !important;
}
/* Toggle buttons (Nu / Planlæg til senere) */
.btn-group-toggle label.active,
.modal .btn-group-toggle label.active {
  color: #fff !important;
  background: var(--cnc-orange) !important;
  border-color: var(--cnc-orange) !important;
}
.btn-group-toggle label {
  color: #333 !important;
}

/* Modal close button — always visible */
.modal .btn-black.btn-circle,
.modal .btn-circle,
.el-dialog .btn-circle {
  background: #333 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.modal .btn-black.btn-circle i,
.modal .btn-circle i {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* ═══ Ordering pages (menu, item dialog, cart, checkout) are styled in ordering.css ═══ */

/* ═══ HIDE MULTI-RESTAURANT UI ═══ */
.components-cuisine-list,
.section-mobileapp,
.section-newmobileapp,
.components-join,
.home-steps,
.signup-section,
.section-social-links,
.app-store-wrap,
.section-join-us,
.section-join-us2,
.section-become,
.swiperOutsideContainer {
  display: none !important;
}

/* Hide address/delivery — pickup only, keep time picker */
#vue-widget-nav,
.component-change-address,
.components-select-address,
.components-address-form,
.home-search-wrap,
#main-search-banner,
.mobile-home-banner,
.delivery-address-wrap,
.address-selection-wrap,
components-location-estimation,
.address-needed {
  display: none !important;
}
/* In the delivery details modal, hide the address row but keep time */
#ModalDeliveryDetails .modal-body > a:first-child,
.component-delivery-details .chevron-section:first-child {
  display: none !important;
}


/* ═══ MOBILE CART — floating button z-index ═══ */
@media (max-width: 991px) {
  .floating-cart {
    z-index: 1000 !important;
  }
}

/* ═══ SEARCH — hide Restaurant tab, only Food ═══ */
.widget-search .nav-item:first-child,
.search-tabs .nav-item:first-child {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════
   MANDATORY DELIVERY BAG (Danish Plastposeloven)
   ═══════════════════════════════════════════════════════════ */
.cnc-bag-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}
.cnc-bag-fee-row {
  background: rgba(176, 160, 155, 0.18);
  border-left: 3px solid var(--tc-accent);
  padding: 8px 12px !important;
  border-radius: 6px;
  margin: 6px 0 !important;
}

/* Bag fee row hover affordance — make it feel tappable */
.cnc-bag-fee-row:hover { background: rgba(176, 160, 155, 0.28); }
.cnc-bag-fee-row .cnc-bag-trigger { transition: opacity 0.15s; }
.cnc-bag-fee-row .cnc-bag-trigger:active { opacity: 0.7; }

/* Bag info modal — universal across mobile / tablet / desktop.
   Hardened against theme overrides: forces white bg + readable text. */
#cncBagInfoModal { z-index: 100000 !important; }
#cncBagInfoModal .modal-dialog { max-width: 440px; }
#cncBagInfoModal .modal-content {
  background: #ffffff !important;
  color: #222 !important;
  border-radius: 14px !important;
  border: none !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3) !important;
}
#cncBagInfoModal .modal-header {
  background: linear-gradient(135deg, #D9273F, #B81F34) !important;
  border-bottom: none !important;
  color: #ffffff !important;
}
#cncBagInfoModal .modal-header *,
#cncBagInfoModal .modal-title { color: #ffffff !important; }
#cncBagInfoModal .modal-body {
  background: #ffffff !important;
  color: #222 !important;
}
#cncBagInfoModal .modal-body p,
#cncBagInfoModal .modal-body span,
#cncBagInfoModal .modal-body em,
#cncBagInfoModal .modal-body strong,
#cncBagInfoModal .modal-body h6 { background: transparent !important; }
#cncBagInfoModal .close,
#cncBagInfoModal .close span,
#cncBagInfoModal button.close { color: #ffffff !important; opacity: 1 !important; }
.modal-backdrop.show { opacity: 0.7 !important; }
@media (max-width: 480px) {
  #cncBagInfoModal .modal-dialog { margin: 16px; max-width: calc(100vw - 32px); }
  #cncBagInfoModal .modal-body img { max-width: 200px !important; }
}

/* legal pages: meta line readable (audit: #999 was 2.8:1) */
.legal-meta { color: #6B7280 !important; }

/* Drawer CTA: Element Plus may not apply custom-class, so do not depend on .drawer-menu */
/* The drawer CTA is the same control as the header CTA and must look like it: same red, same
   type (14px / 700 / .18em caps), same cream "-10%" badge. It used to be a plain "· -10%" text
   on a different weight and tracking, so the two sat side by side and disagreed (2026-09-16). */
a.tc-drawer-cta, a.tc-drawer-cta:link, a.tc-drawer-cta:visited {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--tc-font-brand);
  font-size: 14px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; line-height: 18px;
  background: var(--tc-primary); border: 1px solid var(--tc-primary);
  color: #fff !important; padding: 13px 28px; text-decoration: none !important; white-space: nowrap;
}
a.tc-drawer-cta .tc-cta-badge { font-size: 12px; letter-spacing: .08em; font-weight: 800; background: var(--tc-cream); color: var(--tc-primary-dark) !important; padding: 2px 8px; }
a.tc-drawer-cta:hover .tc-cta-badge, a.tc-drawer-cta:focus .tc-cta-badge { color: var(--tc-primary-dark) !important; background: var(--tc-cream); }
.el-drawer a.tc-drawer-cta:hover, .el-drawer a.tc-drawer-cta:focus,
.el-drawer a.tc-drawer-cta:hover .tc-cta-text, a.tc-drawer-cta:hover, a.tc-drawer-cta:focus { background: var(--tc-primary-dark); color: #fff !important; text-decoration: none !important; }
/* The drawer lives INSIDE #top-navigation, so the header's `a:hover *` ink rule (id specificity,
   !important) and the fill above were repainting the badge ink-on-dark-red on hover. Pin it with
   the same id specificity, at rest and on hover — it must look exactly like the header badge. */
/* The drawer CTA is a filled red button: its text is white in EVERY state. On phones :hover
   sticks after a tap, and the drawer lives inside #top-navigation where the header's hover-ink
   rule (id specificity, !important) was winning — "Bestil online" came out black on red. */
#top-navigation a.tc-drawer-cta, #top-navigation a.tc-drawer-cta .tc-cta-text,
#top-navigation a.tc-drawer-cta:hover, #top-navigation a.tc-drawer-cta:hover .tc-cta-text,
#top-navigation a.tc-drawer-cta:focus, #top-navigation a.tc-drawer-cta:focus .tc-cta-text,
#top-navigation a.tc-drawer-cta:active, #top-navigation a.tc-drawer-cta:active .tc-cta-text { color: #fff !important; }
#top-navigation a.tc-drawer-cta .tc-cta-badge,
#top-navigation a.tc-drawer-cta:hover .tc-cta-badge, #top-navigation a.tc-drawer-cta:focus .tc-cta-badge,
#top-navigation a.tc-drawer-cta:hover .tc-cta-badge * {
  background: var(--tc-cream) !important; color: var(--tc-primary-dark) !important;
}

/* Inner <span class="label"> / .item-summary must never carry their own fill: the button darkens on
   hover while the span kept --tc-primary, which showed as a lighter rectangle behind the text (2026-09-16). */
.btn .label, .btn .item-summary, .btn .label *,
.add_to_cart span, .add_to_cart .label,
.tc-btn .label, .tc-btn .item-summary,
.el-button > span, .btn-green .label, .btn-green .item-summary { background: transparent !important; }

/* Bag-fee row: miniature of the real carrier bag + neutral tint (no colour taken from the artwork). */
.cnc-bag-fee-row { background: rgba(176, 160, 155, .18) !important; border-left: 3px solid var(--tc-accent) !important; }
.cnc-bag-fee-row:hover { background: rgba(176, 160, 155, .28) !important; }
.cnc-bag-icon { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; margin-right: 8px; }
.cnc-bag-fee-row .cnc-bag-trigger { display: flex; align-items: center; gap: 0; }

/* Cart badge: the number must stay white on hover too (the #top-navigation a:hover * rule was
   repainting it ink), and the icon buttons are softer-cornered. */
ul#vue-cart-preview.top-menu > li > a, ul#vue-cart-preview.top-menu .dropdown > a, #top-navigation .hamburger { border-radius: 14px; }
#top-navigation .cart-handle .badge,
#top-navigation a:hover .badge,
#top-navigation a:hover .badge * { color: #fff !important; -webkit-text-fill-color: #fff !important; }
#top-navigation .cart-handle .badge { background: var(--tc-primary) !important; border: 2px solid var(--tc-accent-light) !important; }
#top-navigation a:hover .cart-handle .badge, #top-navigation .cart-handle:hover .badge { border-color: #fff !important; }

/* Cart count: fixed-size flex circle so the digit is optically centred (Bootstrap's .badge padding
   + line-height pushed it up-left). */
#top-navigation .cart-handle .badge {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 20px; height: 20px; min-width: 20px; padding: 0 !important;
  line-height: 1 !important; font-size: 11px !important; font-weight: 800 !important;
  border-radius: 999px !important; box-sizing: content-box;
  right: -9px; top: -8px;
}

/* ═══ "Sign Up" under the login form ═══
   The vendor markup was `btn btn-white p-0` — p-0 removed the padding, so the label sat flush
   against a pale outline and read as a broken control. It is the secondary action on the page
   (primary is "Log in"), so it gets a proper outlined button: brand-red text and border, filled
   red with white text on hover, with room to breathe. */
.tc-signup-cta { margin-top: 18px; }
.tc-signup-cta p { margin: 0 0 10px !important; color: var(--tc-ink-soft); font-size: 14px !important; }
a.tc-btn-signup,
a.tc-btn-signup:link,
a.tc-btn-signup:visited {
  display: inline-block;
  min-width: 180px;
  padding: 13px 34px;
  border: 2px solid var(--tc-primary);
  border-radius: 10px;
  background: #fff;
  color: var(--tc-primary-dark) !important;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: .02em;
  text-decoration: none !important;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
a.tc-btn-signup:hover,
a.tc-btn-signup:focus {
  background: var(--tc-primary);
  border-color: var(--tc-primary);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(217,39,63,.28);
}
a.tc-btn-signup:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(28,28,28,.2); }

/* Order tracking: the shop logo sits on the same dark tile as the header logo — on white the cream
   ring vanished and only half the script read. */
img.tc-logo-tile {
  width: 60px; height: 60px; object-fit: contain;
  background: var(--tc-ink-soft);
  border-radius: 14px;
  padding: 6px;
  box-sizing: border-box;
}

/* Order tracking progress: vendor green → brand red (done steps, the running bar, the pulse). */
#progressbar li.active:before,
#progressbar li.active:after,
.progressing .progress-value { background: #D9273F; }
#progressbar li.progressing:before { animation: tc-pulse-red 2s infinite; }
@keyframes tc-pulse-red {
  0%   { box-shadow: 0 0 0 0 rgba(217, 39, 63, .55); }
  70%  { box-shadow: 0 0 0 10px rgba(217, 39, 63, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 39, 63, 0); }
}

/* ═══ ACCOUNT PAGES — site header on top, sidebar + content below (was: fixed vendor sidebar with the
   bare logo and floating header icons). ═══ */
body.column2-layout { background: #F6F3F1; }
body.column2-layout .tc-account { display: flex; align-items: stretch; min-height: calc(100vh - 108px); }
body.column2-layout #sidebar.tc-account-side {
  position: sticky; top: 0; align-self: flex-start;
  flex: 0 0 280px; width: 280px; height: auto; min-height: calc(100vh - 108px);
  padding: 28px 16px 28px 24px; background: #fff; border: 0; border-right: 1px solid #ECE6E2; box-shadow: none; z-index: 1;
}
body.column2-layout #main-container.tc-account-main {
  flex: 1 1 auto; min-width: 0; width: auto; min-height: 0;
  padding: 28px 24px 48px !important;
}
.tc-account-user h6 { margin: 0 0 2px; font-weight: 800; color: var(--tc-ink-soft); }
.tc-account-who { min-width: 0; }
.tc-account-who p { margin: 0; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
body.column2-layout .siderbar-menu a { border-radius: 10px; padding: 12px 16px; color: var(--tc-ink-soft); }
body.column2-layout .siderbar-menu a:hover { background-color: #F6F3F1; color: #D9273F; }
body.column2-layout .siderbar-menu li.active a { background-color: #FBEAEC; color: #B81F34; font-weight: 700; }
html[dir="rtl"] body.column2-layout #main-container.tc-account-main { padding: 28px 24px 48px !important; }
@media (max-width: 991px) {
  body.column2-layout .tc-account { display: block; min-height: 0; }
  body.column2-layout #main-container.tc-account-main { padding: 16px 12px 40px !important; }
}
.tc-logo-tile.img-60, img.tc-logo-tile { flex: 0 0 auto; }
/* Profile sub-menu (Grundlæggende oplysninger / Skift adgangskode …): active = brand red with white
   text, and it stays white on hover — the global a:hover rule would otherwise paint red on red. */
ul.sub-menu li.active a,
ul.sub-menu li.active a:hover,
ul.sub-menu li.active a:focus,
ul.sub-menu li.active a i { background-color: #D9273F; color: #fff !important; }
ul.sub-menu li a:hover { color: #B81F34 !important; }
ul.sub-menu li.active a:hover { background-color: #B81F34; }


/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   HEADER v2 + SIDE MENU + CAFÉ HERO (2026-09-17) — 1:1 with prototypes/landing.html (variant D,
   header option 6). Later rules on purpose: they override the older header/landing blocks above.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
:root { --tc-logo-bg: #ae9b94; --tc-hdr-h: 116px; --tc-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; }
@media (max-width: 600px) { :root { --tc-hdr-h: 84px; } }

/* header: menu button | neon logo | account + bag, on the logo's own colour */
#top-navigation.tc-nav-v2 { background: var(--tc-logo-bg) !important; }
#top-navigation.tc-nav-v2 > .tc-header {
  grid-template-columns: 1fr auto 1fr; gap: 12px;
  max-width: none; min-height: var(--tc-hdr-h); height: var(--tc-hdr-h);
  padding: 0 clamp(16px, 2.4vw, 40px);
}
#top-navigation.tc-nav-v2 .tc-logo { display: block; height: calc(var(--tc-hdr-h) - 4px); line-height: 0; }
#top-navigation.tc-nav-v2 .tc-logo img { height: 100%; width: auto; display: block; background: none; padding: 0; border-radius: 0; }
@media (max-width: 600px) { #top-navigation.tc-nav-v2 .tc-logo { height: calc(var(--tc-hdr-h) - 2px); } }

/* white rounded squares with dark line icons (menu button, account, bag) */
#top-navigation.tc-nav-v2 .tc-burger,
#top-navigation.tc-nav-v2 ul#vue-cart-preview.top-menu > li > a,
#top-navigation.tc-nav-v2 ul#vue-cart-preview.top-menu .dropdown > a {
  width: 50px !important; height: 50px !important; border: 0; border-radius: 13px !important;
  background: #fff !important; box-shadow: 0 2px 6px rgba(0,0,0,.12);
  display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
#top-navigation.tc-nav-v2 .tc-burger:hover,
#top-navigation.tc-nav-v2 ul#vue-cart-preview.top-menu > li > a:hover,
#top-navigation.tc-nav-v2 ul#vue-cart-preview.top-menu .dropdown > a:hover {
  background: #fff !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.16);
}
#top-navigation.tc-nav-v2 .tc-burger svg,
#top-navigation.tc-nav-v2 .tc-icon,
#top-navigation.tc-nav-v2 ul#vue-cart-preview.top-menu > li > a:hover .tc-icon,
#top-navigation.tc-nav-v2 ul#vue-cart-preview.top-menu .dropdown > a:hover .tc-icon {
  width: 24px; height: 24px; stroke: #1A1514; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round;
}
#top-navigation.tc-nav-v2 ul#vue-cart-preview.top-menu { gap: 10px; }
#top-navigation.tc-nav-v2 .cart-handle span.badge { top: -6px; right: -6px; border-color: #fff; }
#top-navigation.tc-nav-v2 .tc-burger:focus-visible,
#top-navigation.tc-nav-v2 ul#vue-cart-preview.top-menu a:focus-visible { outline: 3px solid #1A1514; outline-offset: 2px; }
@media (max-width: 600px) {
  #top-navigation.tc-nav-v2 .tc-burger,
  #top-navigation.tc-nav-v2 ul#vue-cart-preview.top-menu > li > a,
  #top-navigation.tc-nav-v2 ul#vue-cart-preview.top-menu .dropdown > a { width: 40px !important; height: 40px !important; border-radius: 11px !important; }
  #top-navigation.tc-nav-v2 .tc-burger svg, #top-navigation.tc-nav-v2 .tc-icon { width: 20px; height: 20px; }
  #top-navigation.tc-nav-v2 ul#vue-cart-preview.top-menu { gap: 6px; }
  #top-navigation.tc-nav-v2 > .tc-header { gap: 6px; padding: 0 12px; }
}

/* ── side menu ── */
.tc-drawer-scrim { position: fixed; inset: 0; background: rgba(26,21,20,.45); opacity: 0; transition: opacity .25s; z-index: 2000; }
body.tc-drawer-open .tc-drawer-scrim { opacity: 1; }
.tc-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(420px, 88vw); z-index: 2001;
  background: #F6F0E9; color: #2B2422; font-family: var(--tc-font-brand);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  padding: 22px clamp(24px, 3vw, 40px) 26px; box-shadow: 12px 0 40px rgba(0,0,0,.18);
  transform: translateX(-102%); transition: transform .3s cubic-bezier(.2,.8,.2,1); visibility: hidden;
}
body.tc-drawer-open .tc-drawer { transform: none; visibility: visible; }
body.tc-drawer-open { overflow: hidden; }
.tc-drawer a { text-decoration: none !important; }
.tc-drawer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.tc-drawer-close { width: 46px; height: 46px; border: 0; background: #fff; border-radius: 12px; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.tc-drawer-close svg { width: 22px; height: 22px; stroke: #1A1514; stroke-width: 2.2; fill: none; stroke-linecap: round; }
.tc-drawer-logo { display: none; height: 64px; width: auto; border-radius: 12px; }
@media (max-width: 600px) { .tc-drawer-logo { display: block; } }
.tc-drawer-order, .tc-drawer-order:link, .tc-drawer-order:visited {
  display: flex; align-items: center; gap: 12px; background: var(--tc-primary); color: #fff !important;
  padding: 16px 20px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; font-size: 15px; border-radius: 2px; transition: background .15s;
}
.tc-drawer-order:hover { background: #E5485D; color: #fff !important; }
.tc-drawer-order .pct { background: var(--tc-cream); color: var(--tc-primary-dark); padding: 3px 7px; font-size: 12.5px; letter-spacing: .04em; }
.tc-drawer-order svg { margin-left: auto; width: 22px; height: 22px; stroke: #fff; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tc-drawer-nav { margin-top: 14px; display: flex; flex-direction: column; }
.tc-drawer-nav a, .tc-drawer-nav a:link, .tc-drawer-nav a:visited {
  display: flex; align-items: center; justify-content: space-between; padding: clamp(14px, 2.4vh, 22px) 2px; border-bottom: 1px solid #E1D6CE;
  font-family: var(--tc-serif); font-weight: 600; font-size: clamp(25px, 3.6vh, 31px); line-height: 1.1; color: #2B2422 !important; transition: color .15s, padding .15s;
}
.tc-drawer-nav a svg { width: 20px; height: 20px; stroke: #B8A69D; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s, stroke .15s; flex: 0 0 auto; }
.tc-drawer-nav a:hover { color: var(--tc-primary-dark) !important; padding-left: 8px; }
.tc-drawer-nav a.on, .tc-drawer-nav a.on:link, .tc-drawer-nav a.on:visited { color: var(--tc-primary-dark) !important; }
.tc-drawer-nav a.on svg { stroke: var(--tc-primary-dark); }
.tc-drawer-nav a:hover svg { stroke: var(--tc-primary); transform: translateX(3px); }
.tc-drawer-account { margin-top: auto; display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px; padding: 12px 12px 12px 14px; box-shadow: 0 1px 0 #E6DCD5; }
.tc-drawer-nav + .tc-drawer-account { margin-top: 24px; }
.tc-drawer-account .avatar { flex: 0 0 44px; height: 44px; border-radius: 50%; background: var(--tc-logo-bg); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 15px; letter-spacing: .02em; }
.tc-drawer-account .avatar svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 2; fill: none; }
.tc-drawer-account .who { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.tc-drawer-account .who b { color: #2B2422; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-drawer-account .who a, .tc-drawer-account .who span { color: #8E7E79 !important; font-size: 13px; font-weight: 600; }
.tc-drawer-account .who a:hover { color: var(--tc-primary-dark) !important; }
.tc-drawer-account .acc-btn, .tc-drawer-account .acc-btn:link, .tc-drawer-account .acc-btn:visited {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid #E1D6CE; background: #fff; color: #2B2422 !important;
  font-weight: 800; font-size: 13.5px; padding: 9px 12px; border-radius: 10px; white-space: nowrap; transition: border-color .15s, color .15s, background .15s;
}
.tc-drawer-account .acc-btn svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tc-drawer-account .acc-btn:hover { border-color: var(--tc-primary); color: var(--tc-primary-dark) !important; background: #FFF5F6; }
.tc-drawer-account .acc-btn.primary { background: #2B2422; border-color: #2B2422; color: #fff !important; }
.tc-drawer-account .acc-btn.primary:hover { background: #463C39; border-color: #463C39; color: #fff !important; }
.tc-drawer-signup, .tc-drawer-signup:link, .tc-drawer-signup:visited { display: block; text-align: center; margin-top: 8px; font-weight: 700; font-size: 14px; color: #2B2422 !important; text-decoration: underline !important; text-underline-offset: 3px; }
.tc-drawer-lang { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #EAE1DA; border-radius: 12px; padding: 4px; }
.tc-drawer-lang a, .tc-drawer-lang a:link, .tc-drawer-lang a:visited { display: flex; align-items: center; justify-content: center; gap: 9px; border-radius: 9px; padding: 10px 8px; font-weight: 800; font-size: 14px; color: #6B5F5A !important; transition: background .15s, color .15s, box-shadow .15s; }
.tc-drawer-lang a img { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.tc-drawer-lang a.on { background: #fff; color: #2B2422 !important; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.tc-drawer-lang a:not(.on):hover { color: #2B2422 !important; }
.tc-drawer-foot { margin-top: 16px; color: #6B5F5A; font-size: 14px; line-height: 1.5; }
.tc-drawer-foot p { margin: 0 0 12px; font-size: 14px !important; color: #6B5F5A; }
.tc-drawer-foot b { color: #2B2422; }
.tc-drawer-legal { display: flex; gap: 16px; flex-wrap: wrap; }
.tc-drawer-legal a, .tc-drawer-legal a:link, .tc-drawer-legal a:visited { color: #6B5F5A !important; text-decoration: underline !important; text-underline-offset: 3px; font-size: 13px; }
.tc-drawer-legal a:hover { color: #2B2422 !important; }

/* ── café hero: exactly one screen under the header ── */
.tc-hero {
  display: grid; grid-template-columns: minmax(420px, 1.05fr) 2fr; grid-template-rows: auto 1fr; gap: 6px;
  height: calc(100vh - var(--tc-hdr-h)); height: calc(100dvh - var(--tc-hdr-h)); min-height: 560px; background: #fff;
}
.tc-hero figure { margin: 0; min-height: 0; min-width: 0; overflow: hidden; }
.tc-hero figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-hero-card {
  grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: flex-start;
  padding: clamp(22px, 3.6vh, 40px) clamp(28px, 3.2vw, 56px);
  background-color: #F6F0E9;
  background-image: linear-gradient(rgba(246,240,233,.55), rgba(246,240,233,.55)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420' fill='none' stroke='%23B8A69D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M40 118h78v14c0 26-17 42-39 42s-39-16-39-42z'/%3E%3Cpath d='M118 128c14 0 20 8 17 17s-12 11-19 8'/%3E%3Cpath d='M28 180c20 8 82 8 102 0'/%3E%3Cpath d='M62 102c-6-9 6-14 0-24s6-14 0-22M82 100c-6-9 6-14 0-24s6-14 0-22'/%3E%3Cpath d='M236 92c20-26 70-26 92 0-8 10-18 16-30 18-10-6-22-6-32 0-12-2-22-8-30-18z'/%3E%3Cpath d='M268 110l-6-24M298 110l6-24M282 108v-26'/%3E%3Cpath d='M352 200c-10 40-6 80 12 118'/%3E%3Cpath d='M354 226c-18-4-28-16-30-32 16 2 28 14 30 32zM356 254c18-6 28-18 28-34-16 4-28 16-28 34zM358 284c-18-2-30-14-34-30 16 0 30 12 34 30z'/%3E%3Cpath d='M150 288h110c0 34-24 56-55 56s-55-22-55-56z'/%3E%3Cpath d='M168 288c4-18 18-28 34-24M204 288c2-22 20-32 38-24M232 288c6-12 18-16 28-10'/%3E%3Cpath d='M58 400c6-50 10-96 6-140'/%3E%3Cpath d='M64 292c-12-6-16-18-12-28 12 4 16 16 12 28zM64 292c12-6 16-18 12-28-12 4-16 16-12 28zM62 322c-12-6-16-18-12-28 12 4 16 16 12 28zM62 322c12-6 16-18 12-28-12 4-16 16-12 28z'/%3E%3Ccircle cx='196' cy='40' r='3'/%3E%3Ccircle cx='390' cy='120' r='2.5'/%3E%3Ccircle cx='120' cy='232' r='2.5'/%3E%3Ccircle cx='300' cy='390' r='3'/%3E%3C/svg%3E");
  background-size: auto, 420px 420px; background-position: 0 0, -40px -20px;
}
.tc-hero-side { grid-column: 1; grid-row: 2; }
.tc-hero-grid {
  grid-column: 2; grid-row: 1 / 3; min-height: 0; display: grid; gap: 6px;
  grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 1fr);
  grid-template-areas: "p1 p4" "p1 p6" "p8 p6" "p3 p5";
}
.tc-hero-tile.p1 { grid-area: p1; } .tc-hero-tile.p3 { grid-area: p3; } .tc-hero-tile.p4 { grid-area: p4; }
.tc-hero-tile.p5 { grid-area: p5; } .tc-hero-tile.p6 { grid-area: p6; } .tc-hero-tile.p8 { grid-area: p8; }
.tc-hero-tile.pair { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100%; gap: 6px; }
.tc-hero-card h1 {
  margin: 0; font-family: var(--tc-serif); font-weight: 600; font-size: clamp(34px, 5.4vh, 56px);
  line-height: .98; letter-spacing: -.01em; color: #2B2422;
}
.tc-hero-card h1 em { font-style: italic; font-weight: 500; color: #2B2422; }
.tc-hero-card .lede {
  margin: clamp(12px, 2vh, 18px) 0 0; max-width: 40ch; color: #2B2422;
  font-size: clamp(16px, 2.2vh, 19px) !important; line-height: 1.45; font-weight: 600;
}
.tc-hero-card .lede span { font-weight: 500; color: #5E534F; font-size: .9em; }
.tc-hero-order, .tc-hero-order:link, .tc-hero-order:visited {
  margin-top: clamp(16px, 3vh, 28px); display: flex; align-items: center; justify-content: space-between;
  background: var(--tc-primary); color: #fff !important; text-decoration: none !important;
  padding: clamp(14px, 2.2vh, 18px) 24px; border-radius: 2px;
  font-weight: 800; font-size: clamp(14px, 1.9vh, 16px); letter-spacing: .08em; text-transform: uppercase;
  transition: background .15s, transform .15s;
}
.tc-hero-order-label { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.tc-hero-order .pct {
  background: var(--tc-cream); color: var(--tc-primary-dark); padding: 3px 8px; border-radius: 2px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .04em; line-height: 1.2; flex: none;
}
.tc-hero-order::after { content: "→"; font-size: 24px; letter-spacing: 0; line-height: 1; }
.tc-hero-order:hover { background: #E5485D; color: #fff !important; transform: translateY(-2px); }
.tc-hero-more { margin-top: clamp(12px, 2vh, 18px); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tc-hero-more a, .tc-hero-more a:link, .tc-hero-more a:visited {
  display: flex; flex-direction: column; gap: 2px; background: #2B2422; border-radius: 2px; padding: 14px 18px;
  text-decoration: none !important; transition: background .15s, transform .15s;
}
.tc-hero-more a:hover { background: #463C39; transform: translateY(-2px); }
.tc-hero-more b { color: #fff; font-size: 15px; font-weight: 700; }
.tc-hero-more b::after { content: " →"; color: #FFB3BD; }
.tc-hero-more span { color: #E6DCD6; font-size: 13px; }
.tc-hero a:focus-visible { outline: 3px solid #1A1514; outline-offset: 3px; }

/* phones: photos first, copy + buttons below — still one screen */
@media (max-width: 600px) {
  .tc-hero { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow: hidden; }
  .tc-hero-side { display: none; }
  .tc-hero-grid { order: 1; flex: 1 1 0; min-height: 120px; grid-template-rows: 1fr 1fr; grid-template-areas: "p1 p3" "p8 p6"; }
  .tc-hero-tile.p4, .tc-hero-tile.p5 { display: none; }
  .tc-hero-tile.pair { grid-template-columns: 1fr; }
  .tc-hero-tile.pair img + img { display: none; }
  .tc-hero-card { order: 2; flex: 0 0 auto; padding: 14px 16px 16px; background-size: auto, 300px 300px; }
  .tc-hero-card h1 { font-size: clamp(32px, 5vh, 40px); }
  .tc-hero-card .lede { font-size: 13.5px !important; line-height: 1.38; margin-top: 8px; }
  .tc-hero-order, .tc-hero-order:link, .tc-hero-order:visited { margin-top: 12px; padding: 13px 16px; font-size: 14px; }
  .tc-hero-more { margin-top: 8px; gap: 8px; }
  .tc-hero-more a, .tc-hero-more a:link, .tc-hero-more a:visited { padding: 11px 12px; }
  .tc-hero-more b { font-size: 14px; }
  .tc-hero-more span { display: none; }
}
/* short phones: the copy shrinks rather than disappearing — it is the page's message */
@media (max-width: 600px) and (max-height: 720px) {
  .tc-hero-card h1 { font-size: 28px; }
  .tc-hero-card .lede { font-size: 12.5px !important; line-height: 1.32; margin-top: 6px; }
}


/* ── indholdssektioner under heroen ─────────────────────────────────────── */
.tc-sec { background: #FBF8F4; }
.tc-sec-head { background: var(--tc-accent-light); padding: clamp(26px, 3vw, 44px) 24px; }
.tc-sec-head-in { max-width: 1120px; margin: 0 auto; }
.tc-sec-head h2 {
  margin: 0; display: flex; align-items: center; gap: clamp(14px, 2.2vw, 28px);
  font-family: var(--tc-serif); font-weight: 600; font-style: italic;
  font-size: clamp(30px, 4.4vw, 58px); line-height: 1; letter-spacing: -.015em; color: #241F1E;
}
.tc-sec-head h2::before, .tc-sec-head h2::after { content: ""; flex: 1; height: 1px; background: #C4B7AF; }
.tc-sec-body { padding: clamp(30px, 3.6vw, 54px) 24px clamp(34px, 4vw, 60px); }
.tc-sec-item {
  max-width: 1120px; margin: 0 auto; display: grid; gap: clamp(26px, 4vw, 56px); align-items: center;
  grid-template-columns: minmax(0, 1fr) clamp(210px, 21vw, 300px);
}
.tc-sec-item + .tc-sec-item { margin-top: clamp(28px, 3.4vw, 52px); }
.tc-sec-left { grid-template-columns: clamp(210px, 21vw, 300px) minmax(0, 1fr); }
.tc-sec-right .tc-sec-text { order: 1; } .tc-sec-right .tc-sec-photo { order: 2; }
.tc-sec-left  .tc-sec-text { order: 2; } .tc-sec-left  .tc-sec-photo { order: 1; }
.tc-sec h3 {
  margin: 0 0 10px; font-family: var(--tc-serif); font-weight: 600;
  font-size: clamp(23px, 2.3vw, 31px); line-height: 1.12; letter-spacing: -.01em; color: #241F1E;
}
.tc-sec h3 em { font-style: italic; font-weight: 500; color: var(--tc-primary); }
.tc-sec p {
  margin: 0 0 13px; max-width: 64ch; font-family: var(--tc-serif); font-weight: 500;
  font-size: clamp(19px, 1.45vw, 23px) !important; line-height: 1.5; color: #3E3532;
}
.tc-sec p:last-child { margin-bottom: 0; }
.tc-sec-photo {
  margin: 0; width: 100%; aspect-ratio: 1; overflow: hidden; border: 9px solid #fff; border-radius: 3px;
  background: #EFE8E2; box-shadow: 0 14px 34px rgba(36, 31, 30, .13);
}
.tc-sec-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 820px) {
  .tc-sec-item, .tc-sec-left { grid-template-columns: 1fr; gap: 20px; }
  .tc-sec-right .tc-sec-text, .tc-sec-left .tc-sec-text { order: 2; }
  .tc-sec-right .tc-sec-photo, .tc-sec-left .tc-sec-photo { order: 1; }
  .tc-sec-photo { max-width: 340px; margin-inline: auto; }
  .tc-sec-head h2 { gap: 12px; }
}


/* ── 404 ─────────────────────────────────────────────────────────────────── */
.tc-404 { background: #FBF8F4; display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - var(--tc-hdr-h) - 60px); padding: clamp(40px, 8vh, 90px) 24px; }
.tc-404-in { max-width: 620px; text-align: center; }
.tc-404-code {
  margin: 0 0 6px; font-family: var(--tc-serif); font-style: italic; font-weight: 600;
  font-size: clamp(64px, 14vw, 132px) !important; line-height: .9; color: var(--tc-accent-light);
  letter-spacing: -.02em;
}
.tc-404 h1 {
  margin: 0 0 14px; font-family: var(--tc-serif); font-weight: 600;
  font-size: clamp(28px, 4.4vw, 44px); line-height: 1.1; color: #241F1E;
}
.tc-404-copy {
  margin: 0 auto 28px; max-width: 46ch; font-family: var(--tc-serif); font-weight: 500;
  font-size: clamp(17px, 1.4vw, 21px) !important; line-height: 1.55; color: #4A403C;
}
.tc-404-links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.tc-404-links a, .tc-404-links a:link, .tc-404-links a:visited {
  display: inline-flex; align-items: center; padding: 13px 22px; border-radius: 2px;
  font-weight: 800; font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none !important; transition: background .15s, transform .15s;
}
.tc-404-primary, .tc-404-primary:link, .tc-404-primary:visited { background: var(--tc-primary); color: #fff !important; }
.tc-404-primary:hover { background: #E5485D; transform: translateY(-2px); }
.tc-404-ghost, .tc-404-ghost:link, .tc-404-ghost:visited { background: #2B2422; color: #fff !important; }
.tc-404-ghost:hover { background: #463C39; transform: translateY(-2px); }

/* ── foden: telefon og mail ─────────────────────────────────────────────── */
.cnc-find-contact a, .cnc-find-contact a:link, .cnc-find-contact a:visited {
  color: inherit !important; text-decoration: underline !important; text-underline-offset: 3px;
}
.cnc-find-contact a:hover { color: var(--tc-primary, #D9273F) !important; }
.cnc-dir-under-map { display: inline-flex; margin-top: 10px; }