/************************************************************
 * styles.css – base setup (Nexa + brandfarver)
 ************************************************************/

/* Typekit – Nexa */
@import url("https://use.typekit.net/gde0wjq.css");

/* Variabler: farver + typografi */
:root {
  /* Font-stak – Nexa fra Typekit */
  --font-base: "nexa", "Nexa", system-ui, -apple-system, "Segoe UI",
               Roboto, Arial, sans-serif;

  /* Brandfarver (korrekte værdier) */
  --color-yellow: #3C3937;
  --color-pink:   #453A3A;
  --color-cyan:   #D3C8BF;
  --color-gray:   #665E50;
  --color-black:  #1A1919;

  /* Standard theme mapping */
  --bg:    #ffffff;
  --ink:   var(--color-black);
  --brand: var(--color-cyan);
  --accent:var(--color-pink);

  /* Typografi skalering */
  --fs-0: clamp(12px, 0.72vw, 14px);
  --fs-1: clamp(14px, 0.85vw, 16px);
  --fs-2: clamp(16px, 1.00vw, 18px);
  --fs-3: clamp(20px, 1.25vw, 24px);
  --fs-4: clamp(24px, 1.60vw, 32px);
  --fs-5: clamp(28px, 2.00vw, 40px);

  --leading-tight: 1.15;
  --leading-normal: 1.5;
}

/* Base reset */
html { -webkit-text-size-adjust: 100%; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/* Body */
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-base);
  font-size: var(--fs-1);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/***********************
 * Typografi – Nexa
 ***********************/
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-base);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  margin: 0 0 .5em 0;
}

h1 { font-size: var(--fs-5); font-weight: 700!important; }
h2 { font-size: var(--fs-4); font-weight: 700!important; }
h3 { font-size: var(--fs-3); font-weight: 700!important; }
h4 { font-size: var(--fs-2); font-weight: 700!important; }
h5 { font-size: var(--fs-1); font-weight: 700!important; }
h6 { font-size: var(--fs-0); font-weight: 700!important; }

p { font-size: var(--fs-1); font-weight: 400; margin: 0 0 1em 0; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Fjern tvungen UPPERCASE i hele shoppen */
h1, h2, h3, h4, h5, h6,
#center_column h1, #center_column h2, #center_column h3,
#center_column h4, #center_column h5, #center_column h6,
.product-name, .page-heading,
.category-name, #columns .title_block,
.box .title_block {
    text-transform: none !important;
}

/********************************************
 * PRESENCIA BUTTON STYLES (GLOBAL CLASSES)
 ********************************************/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 14px 32px;
  border-radius: 50px;        /* ← FAST RADIUS */
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  transition: all .25s ease;
}


/* ------------------------------------------
   1) LYS KNAP — beige bg / mørk tekst
------------------------------------------- */
.btn-beige {
  background: #D3C8BF;
  color: #453A3A;
  border: 1px solid #D3C8BF;
}

.btn-beige:hover {
  background: #453A3A;
  color: #ffffff;
  border-color: #453A3A;
  transform: translateY(-1px);
}


/* ------------------------------------------
   2) MØRK KNAP — mørk grå bg / hvid tekst
------------------------------------------- */
.btn-dark {
  background: #3C3937;
  color: #ffffff;
  border: 1px solid #3C3937;
}

.btn-dark:hover {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
  transform: translateY(-1px);
}

/* ------------------------------------------
   3) OUTLINE KNAP — sort kant → sort fill
------------------------------------------- */
.btn-outline {
  background: transparent;
  color: #1A1919;
  border: 2px solid #1A1919;
}

.btn-outline:hover {
  background: #1A1919;
  color: #ffffff;
  transform: translateY(-1px);
}

/* ========== STYLING AF TOP SEKTION (FORSIDE) ========== */

/* ----------------------------------------------------------------
   Top info bar
-------------------------------------------------------------------*/
.top-info {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 35px;
  background-color: #D3C8BF !important;
  z-index: 10000;
}

.top-info__inner {
  max-width: 1240px;      /* justér hvis shoppen har en anden max-width */
  margin: 0 auto;
  height: 35px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.top-info__left,
.top-info__right {
  display: flex;
  align-items: center;
}

.top-info__list {
  display: flex;
  align-items: center;
  gap: 28px;              /* afstand mellem punkter */
  list-style: none;
  margin: 0;
  padding: 0;
}

.top-info__list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.top-info__list img {
  width: 20px;
  height: 20px;
  display: inline-block;
}

.top-info__link {
  color: #fff;
  text-decoration: none;
}
.top-info__link:hover {
  text-decoration: underline;
}

/* Giv plads i toppen fordi baren er fixed */
body {
  padding-top: 35px;
}

/***********************
 * Styling af produktkategorier bokse
 ***********************/

/* --- FRONT PAGE GRID: switch to CSS GRID for perfect rows/cols --- */
#frontpage-sortable-grid-form ul#frontpage-sortable-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 30px 0 24px 0;   /* luft over galleriet */
  width: 100% !important;
}

/* Neutralize legacy widths/floats and force equal height */
#frontpage-sortable-grid-form ul#frontpage-sortable-grid > li {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0;
  box-sizing: border-box;
  border-radius: 0;          /* 0 radius til boksen */
  overflow: hidden;
  box-shadow: 0 20px 40px 0 rgba(0,0,0,.10);

  height: 300px;          /* samme højde = helt lige rækker */
  position: relative;
}

/* Clickable card wrapper */
#frontpage-sortable-grid-form .htmlcontent-home li .item-link {
  display: block;
  position: relative;
  height: 100%;
  background: rgba(211, 200, 191, 0.15);
  text-decoration: none;
  cursor: pointer;
}

/* Image as full background */
#frontpage-sortable-grid-form .htmlcontent-home li .htmlcontent-item-img,
.htmlcontent-item-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  z-index: 1;
}

/* Uniform overlay i beige */
#frontpage-sortable-grid-form .htmlcontent-home li .item-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(211, 200, 191, 0.30) !important;   /* base: lidt lys */
  z-index: 2;
  transition: background .25s ease;
}
#frontpage-sortable-grid-form .htmlcontent-home li .item-link:hover::after {
  background: rgba(211, 200, 191, 0.75) !important;   /* HOVER: mørkere beige */
}

/* Remove old borders on hover */
#frontpage-sortable-grid-form .htmlcontent-home li .item-link::before,
#frontpage-sortable-grid-form .htmlcontent-home li a:hover::before {
  content: none !important;
  border: none !important;
}

/* Text layer */
#frontpage-sortable-grid-form .htmlcontent-home li .item-html {
  position: absolute;
  inset: 0;
  padding: 24px;
  z-index: 3;
  color: #453A3A !important;
  font-family: var(--font-base), sans-serif;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* H2 øverst, h3/p lige under */
}

#frontpage-sortable-grid-form .htmlcontent-home li .item-html h2 {
  margin: 0 0 8px 0;
  font-weight: 700;
  font-size: 22px;
  text-transform: capitalize;
  color: #453A3A !important;
  letter-spacing: .2px;
}

#frontpage-sortable-grid-form .htmlcontent-home li .item-html h3,
#frontpage-sortable-grid-form .htmlcontent-home li .item-html p {
  margin: 0 0 8px 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease;
  color: #453A3A;
}
#frontpage-sortable-grid-form .htmlcontent-home li .item-link:hover .item-html h3,
#frontpage-sortable-grid-form .htmlcontent-home li .item-link:hover .item-html p {
  opacity: 1;
  transform: translateY(0);
}

#frontpage-sortable-grid-form .htmlcontent-home li .item-html h2 { font-size: 25px; font-weight: 700 !important; }
#frontpage-sortable-grid-form .htmlcontent-home li .item-html h3 { font-size: 18px; font-weight: 600; }
#frontpage-sortable-grid-form .htmlcontent-home li .item-html p  { font-size: 14px; font-weight: 400; }

/* Kill clearfix-ghosts on the grid container */
#frontpage-sortable-grid-form ul#frontpage-sortable-grid::before,
#frontpage-sortable-grid-form ul#frontpage-sortable-grid::after {
  content: none !important;
  display: none !important;
}

/* Belt & suspenders: make sure no leftover hacks push item 1 */
#frontpage-sortable-grid-form ul#frontpage-sortable-grid > li:first-child {
  margin-left: 0 !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

#frontpage-sortable-grid-form .htmlcontent-home li .item-html,
#frontpage-sortable-grid-form .htmlcontent-home li .item-html h2,
#frontpage-sortable-grid-form .htmlcontent-home li .item-html h3,
#frontpage-sortable-grid-form .htmlcontent-home li .item-html p {
  font-family: var(--font-base), sans-serif !important;  /* Nexa */
}



/* ============ TOP-SEKTION (samme bredde som resten af siden) ============ */
.home-top{
  /* Presencia brand-farver */
  --brand: #D3C8BF;   /* tyrkis */
  --accent: #D8107E;  /* pink – kan bruges senere */
  --lime: #FFF006;    /* gul CTA */
  --ink:  #1A1919;    /* sort */
  --muted: #665E50;   /* mørk grå tekst */

  --radius-lg: 20px;
  --radius-pill: 9999px;

  --fs-0: clamp(12px, 0.72vw, 14px);
  --fs-1: clamp(14px, 0.85vw, 16px);
  --fs-2: clamp(16px, 1.00vw, 18px);
  --fs-3: clamp(20px, 1.25vw, 24px);
  --fs-4: clamp(36px, 3.0vw, 56px);

  --site-container: 1170px; /* ← matcher dit tema. Justér her hvis needed */

  color: var(--ink);
  background: var(--bg);
  position: relative;
  padding: 32px 0 0;

  font-family: var(--font-base); /* Nexa som base */
}

.home-top__inner{
  width: 100%;
  max-width: var(--site-container);
  margin-inline: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.col-sm-9 {
        width: 100% !important;
    }

/* --------- Buttons --------- */
.home-top .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding: 12px 28px;
  border:1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--lime);
  color:#000;
  font-weight:600;
  font-size:14px;
  text-decoration:none;
  cursor:pointer;
  font-family: var(--font-base);
}
.home-top .btn--outline{
  background:transparent;
  border-color: var(--brand);
  color:#000;
}

/* --------- Hero (60/40) --------- */
.home-top .hero{
  display:grid;
  grid-template-columns: 3fr 2fr; /* 60/40 */
  gap: clamp(24px, 6vw, 100px);
  align-items:start;
  margin-bottom: clamp(20px, 4vw, 32px);
}

.home-top .hero__eyebrow{
  font-size:16px;
  color: var(--muted);
  font-family: var(--font-base);
}

.home-top .hero__title{
  font-size: var(--fs-4);
  line-height:1.05;
  letter-spacing:-0.01em;
  margin:.25em 0 .75em 0;
  font-weight: 700;
  font-family: var(--font-base);
  color: var(--ink);
}

.home-top .hero__contact{
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:20px;
}

.home-top .hero__avatar{
  width:85px;
  height:85px;
  border-radius:50%;
  object-fit:cover;
}

/* --------- Video-blok --------- */
.home-top .hero-video{
  margin-top:24px;
}
.home-top .hero-video video{
  width:100%;
  height:400px;
  border-radius: 0px;
  object-fit:cover;
  display:block;
  margin-bottom: 20px;
}

/* --------- Filter knapper styling --------- */

/* PRESENCIA – styling af markup-bokse */
.markup,
.markup.free-freight {
  font-family: var(--font-base);     /* Nexa fra dine variabler */
  font-size: 16px;
  font-weight: 500;
  color: #1A1919;
  background: #ffffff;
  padding: 14px 18px;
  border: 1px solid #e9e9e9;         /* lys grå kant */
  border-radius: 8px;
  display: inline-block;
  margin: 5px 0;

  /* Kun stort begyndelsesbogstav */
  text-transform: none !important;
}

/* Sikrer at teksten IKKE bliver tvunget til uppercase af shop-systemet */
.markup *,
.markup.free-freight * {
  text-transform: none !important;
}

/* Ikonjustering */
.markup.free-freight i {
  margin-left: 6px;
  color: #D3C8BF; /* Presencia tyrkis */
}

/* ====== Fjern seperator ======== */

#htmlcontent_home {
    border-bottom: none !important;
}

.home-container {
    border-bottom: none !important;
}

/* ===== MEGA MENU styling ===== */

/* ====== TOP LEVEL MENU LINKS — NEXA, 15px, 600 ====== */

#cbp-hrmenu > ul > li > a {
    font-family: "Nexa", sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1A1919 !important;
}

.cbp-hrmenu {
    border-bottom: none !important;
}

/* ================== Pille-farve på topmenu ================== */
:root{
  --menu-pill: #FFF006; /* gul */
}

/* Topmenu-piller: gul ved hover + åben */
#cbp-hrmenu > ul > li > a:hover,
#cbp-hrmenu > ul > li.cbp-hropen > a{
  background: #FFF006;
  color: #000 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

/* ================== Mega-menu panelet ================== */
#cbp-hrmenu,
#cbp-hrmenu *{
  z-index: 10000 !important;
}

.cbp-hrmenu .cbp-hrsub{
  background: #fff !important;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  overflow: visible;
  position: absolute;
}

/* Fjern default margin/padding fra indre wrapper */
.cbp-hrmenu .cbp-hrsub-inner{
  margin: 0 !important;
  padding: 0 !important;
}

/* ================== Liste-styling i dropdown ================== */
.cbp-hrmenu .cbp-hrsub-inner ul{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

/* Ingen margin på li */
.cbp-hrmenu .cbp-hrsub-inner li{
  margin: 0 !important;
  padding: 0 !important;
}

/* Links i dropdown */
.cbp-hrmenu .cbp-hrsub-inner a{
  display: block;
  padding: 3px 0; /* mindre spacing mellem punkter */
  font-family: "Nexa", sans-serif;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.5;
  color: #000 !important;
  text-decoration: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Hover på links */
.cbp-hrmenu .cbp-hrsub-inner a:hover{
  color: #003054 !important;
  background: transparent !important;
}

/* Active/focus */
.cbp-hrmenu .cbp-hrsub-inner a:active,
.cbp-hrmenu .cbp-hrsub-inner a:focus,
.cbp-hrmenu .cbp-hrsub-inner li.active > a{
  background: transparent !important;
  color: #003054 !important;
  outline: none !important;
}

/* Pæn overgang på top-piller */
#cbp-hrmenu > ul > li > a{
  border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}

.menu-product-image {
    background-size: contain;
    height: 350px;
    background-repeat: no-repeat;
    background-position: center center;
    background-origin: content-box;
    background-color: #f8f8f8;
    border-radius: 5px;
}

/* ===== FOOTER ===== */

/* Full-bleed footer background + centered content */
.footer-container{
  position: relative;             /* anchor the pseudo background */
  isolation: isolate;             /* keep the pseudo behind the content */
}

/* Paint a 100vw strip behind the footer, regardless of parent widths */
.footer-container::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;                    /* span full viewport width */
  transform:translateX(-50%);     /* center it */
  background:#f9f9f9;             /* your desired full-width bg color */
  z-index:-1;                     /* sit behind footer content */
}

/* Keep footer content constrained & centered */
.footer-container #footer{
  max-width:1170px;               /* same width as the rest of the site */
  margin:0 auto;
  padding:40px 16px;              /* some breathing room */
}

/* Footer h4 styling */
.footer-container #footer h4 {
  font-family: "Nexa", sans-serif !important;
  font-weight: 700;
  font-size: 16px;
  color: black;
  margin-bottom: 12px; /* lidt luft under overskriften */
  text-transform: none !important;
}

/* Footer links */
.footer-container #footer ul li > a {
  font-family: "Nexa", sans-serif !important;
  font-weight: 400;
  font-size: 14px;
  color: #000;          
  text-transform: none !important; 
  transition: color .2s ease;
}

a.login {
  text-transform: none !important;
}

.footer-container #footer ul li > a:hover {
  color: #003054;       
  text-transform: none !important;
}

/* Copyright (bottom-footer) full width background + font */
.footer-container .bottom-footer{
  position: relative;
  isolation: isolate;
  margin-top: 20px;
  padding: 16px 0;
  text-align: center;
  font-family: "Nexa", sans-serif !important;
  font-size: 11px;
  font-weight: 400;
  color: #000 !important;
  bottom: -100px !important;
}

/* Extend background full width */
.footer-container .bottom-footer::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:#f9f9f9;
  z-index:-1;
}

.footer-container #footer .bottom-footer div {
    color: #000 !important;
    font-weight: 500;
}

.footer-container #footer #block_contact_infos > div ul li > span a {
    color: #D3C8BF !important;
}