@font-face {
    src: url(../fonts/ACaslonPro-Regular.otf);
    font-family: "Caslon";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    
}
@import url("https://use.typekit.net/pmr8jtx.css");

body{
    background:#ffffff;
    overflow-x: hidden;
}

.grid-cell.with-color a{
    display:block;
    padding: 2em 1em;
    background: #9e9e9e;
    color: #fff;
    height:100%;
}

.grid-cell.with-color p{
    height:100%;
}

.t-panel-clean > .pane,
.nav-tabs,
.nav-tabs li.active > a {
    border-color: #eee;
}

.product-title,
.m-product-price {
    margin-top: 0;
    font-size: 26px;
}

.m-product-information * {
    font-family: "Caslon";
}
.table-h-striped td.m-product-customdata-title {
    font-size: 16px;
}
.h5.m-productlist-title{
    max-width: 140px;
    white-space: break-spaces;
}
@media (min-width: 960px) {
    .site-header {
        left: 0;
        right: 0;
        max-height: 150px;
        max-width: 250px;
        margin: auto;
        top: 0;
        transform: none;
    }
    .site-header img {
        margin: auto;
        max-height: 100%;
    }
}

div * { text-align: center;
font-family: "Caslon", "adobe-caslon-pro", serif;
font-weight: 400;
font-style: normal;

/* Min: 1rem (16px), Præference: ~1.1vw, Max: 1.25rem (20px) */
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
  line-height: 1.6; /* Vigtigt for læsbarheden, når teksten skaleres */

}
.marselis-content a{
    color:red;
}

/* 1. FONTS & GRUNDLÆGGENDE STYLING */
:root {
    --marselis-font: "adobe-caslon-pro", serif;
    --bg-color: #ffffff;
    --text-color: #1a1a1a;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: var(--bg-color);
    font-family: var(--marselis-font);
    -webkit-font-smoothing: antialiased;
}

/* 2. HERO CONTAINER */
.hero-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--white); /* Matcher den hvide baggrund i dit billede */
}

.hero-section picture {
    width: 100%;
    line-height: 0; /* Fjerner whitespace under billedet */
}

.hero-image {
    /* Dette sikrer at billedet altid vises i fuld bredde og 
       skalerer højden derefter, så intet bliver beskåret */
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
}

/* 3. TYPOGRAFI (Adobe Caslon Pro setup) */
h1 {
    font-family: var(--marselis-font);
    font-weight: 400;
    font-size: clamp(1.5rem, 5vw, 2.5rem); /* Skalerer tekststørrelsen flydende */
    text-transform: uppercase;
    letter-spacing: 0.2em;
    text-align: center;
    margin: 2rem 0;
    color: var(--text-color);
}

.caslon-italic {
    font-family: var(--marselis-font);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.02em;
}

/* Sørg for at Adobe Caslon Pro er indlæst i din HTML head */

.hero-wrapper {
    width: 100%;
    background-color: #ffffff; /* Matcher den hvide baggrund i dine filer */
    display: block;
}

.hero-wrapper picture {
    display: block;
    width: 100%;
}

.hero-wrapper img {
    /* Vigtigste del: */
    width: 100%;      /* Fyld bredden */
    height: auto;     /* Lad højden følge med proportionelt */
    display: block;   /* Fjerner gap i bunden */
    max-width: 100%;  /* Sikrer den ikke stikker af på kæmpe skærme */
}

/* Typografi styling til Marselis */
.marselis-text {
    font-family: "adobe-caslon-pro", serif;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 20px;
}