<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">.site-header {
    background-color: #c8321b;
    padding: 1rem 0;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    flex-wrap: wrap;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-logo img {
    height: 60px;
}

.header-title .site-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
}

.header-title .site-location {
    font-size: 0.875rem;
    color: white;
    text-transform: uppercase;
}
.wicked-header .main-navigation {
    background-color: unset;
}

.wicked-header .main-navigation .main-nav&gt;ul {
    flex-wrap: nowrap;
    color: #FFF;
}

.primary-nav .main-nav {
    list-style: none;
    display: flex;
    gap: 1rem;
    margin: 0;
    padding: 0;
}

.primary-nav .main-nav li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.primary-nav .main-nav li a:hover,
.primary-nav .main-nav li a:focus {
    text-decoration: underline;
}



/* HEADER BASE */
header.wicked-header {
    align-items: center;
    justify-content: space-evenly;
    margin-top: 2em;
    margin: 2em auto;
    max-width: fit-content;

}

.wicked-header .header-inner {
    background-color: #c8321b;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
    min-width: 700px;
    border-bottom: 8px solid transparent;
    padding: .8em;
}

.header-drip {
  width: 50%;
  overflow: hidden;
  line-height: 0;
  margin-top: -1px;
}

.header-drip svg {
  display: block;
}

.header-nodrip {
    width: 50%;
}

.logo-block {
    display: flex;
    align-items: center;
    gap: 3em;
}

.cone-icon {
    position: absolute;
    top: -30px;
    left: -0.3rem;
    width: 120px;
    z-index: 1000;
    text-shadow: 2px 2px 0 #a82210;
}

.logo-text {
    color: white;
    line-height: 1;
    margin-left: 120px;
    padding: .5rem;
}

.site-name {
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(1rem, 0.091rem + 7.273vw, 2.5rem);
    line-height: 1;
    text-align: center;
    margin-top: -10px;
    text-shadow: 2px 2px 0 #000;  /* optional: adds outline contrast */
}

.site-location {
    font-size: clamp(0.5rem, 0.197rem + 2.424vw, 1rem);
    letter-spacing: 4px;
    margin-bottom: -50px;
    font-weight: 700;
}

/* NAVIGATION */
.wicked-nav {
    flex: 1;
    text-align: right;
    margin-left: 2em;
}

.wicked-nav .main-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 2em;
    justify-content: flex-end;
}

.wicked-nav .main-nav li a {
    color: white;
    font-weight: bold;
    text-decoration: none;
    font-size: 1.3rem;
}

.wicked-nav .main-nav li a:hover,
.wicked-nav .main-nav li a:focus {
    text-decoration: underline;
}



/* HEADINGS */

h1 {
    /* Banner and Text Color */
    background-color: #c73c38; /* A deep red sampled from your image */
    color: #f6eadd;           /* An off-white/cream color for the text */

    /* Typography */
    font-size: clamp(2rem, 8vw, 4rem); /* Responsive font size */
    text-transform: uppercase;
    letter-spacing: 1px;

    /* Sizing and Layout */
    display: block;
    padding: 0.5em 1.75em; /* Padding using 'em' scales with the font size */
    clip-path: polygon(0% 0%, 100% 0%, calc(100% - 1.25em) 50%, 100% 100%, 0% 100%, 1.25em 50%);
    min-width: 400px;
    max-width: 600px;
    margin: 0 auto !important;
}

h2.flavor-category-title {
    margin: 0 auto;
    text-align: center;
}

.separate-containers .inside-article {
    max-width: 80%;
    /* padding: 40px; */
    /* margin: 0 auto; */

    border: 3px solid #c8321b; /* matches your red accent */
    border-radius: 20px;
    padding: 2rem;
    margin: 2rem auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* optional soft shadow */

}

/* FLAVORS */

/* --- Flavor Item Styling --- */

.flavors-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5em;
    padding: 1em;
    margin: 0 auto 5em;
    max-width: 80%;
}


/* Responsive */
@media screen and (max-width: 768px) {
    .flavors-grid {
        flex-direction: column;
        align-items: center;
    }
}


/* * 1. The main container for each flavor.
    * We use 'position: relative' so the banner inside can be positioned relative to this box.
    * 'display: inline-block' allows multiple items to sit side-by-side.
    * The bottom padding creates space for the banner to sit without overlapping other content below it.
*/
.flavor-item {
    position: relative;
    display: inline-block;
    width: 200px; /* Adjust width as needed */
    padding-bottom: 25px; /* Creates space for the banner */
    text-align: center;
}

/* * 2. The thumbnail container and image.
    * We make the image a block element and ensure it scales correctly.
*/
.flavor-thumbnail {
    max-height: 175px;
    overflow: hidden;
}

.flavor-thumbnail img {
    display: block;
    width: 100%;
    height: auto;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
}

/*
    * 3. The ribbon banner for the flavor name.
    * This is where the magic happens.
*/
.flavor-name {
    /* Positioning */
    position: absolute; /* Positioned relative to .flavor-item */
    left: 50%;          /* Horizontally aligns the element's left edge to the center */
    transform: translateX(-50%); /* Pulls the element left by half its own width to truly center it */
    width: 125%;        /* Makes the banner 25% wider than the image container */

    /* Banner Style */
    background-color: #c73c38;
    color: #ffffff;

    /* Typography */
    font-family: 'Public Sans', sans-serif;
    font-weight: 700;
    font-size: 1.1rem; /* Adjust font size as needed */

    /* Sizing and Layout */
    padding: 0.5em 1em;
    box-sizing: border-box;
    clip-path: polygon(0% 0%, 100% 0%, calc(100% - 0.8em) 50%, 100% 100%, 0% 100%, 0.8em 50%);
    margin-bottom: -100px;

}


/* FLIP BOX EFFECT */

/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
  background-color: transparent;
  height: 200px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the back side */
.flip-box-back {
    background-color: #fff8c8;
    color: #000;
    transform: rotateY(180deg);
    padding: 4px;
    border-radius: 10px;
    font-size: 0.9em;
}

/* FOOTER */

.wicked-footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  background-color: #c8321b;
  color: #fff;
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
  z-index: 999;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
}

.wicked-footer a {
  color: #fff8c8;
  text-decoration: none;
}

.wicked-footer a:hover {
  text-decoration: underline;
}




/* RESPONSIVE */
@media screen and (max-width: 768px) {

    .header-container {
        flex-direction: column;
        align-items: center;
    }

    .primary-nav .main-nav {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    .main-navigation, .wicked-header {
        position: sticky;
        top: 0;
        z-index: 9999;
    }

    header.wicked-header {
        margin-top: 0;
        max-width: 100%;
    }

    .wicked-header .header-inner {
        flex-direction: row;
        text-align: center;
        min-width: 100%;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .wicked-header .header-inner .logo-text {
        margin-left: 35%;
    }

    .wicked-nav {
        text-align: center;
        margin-top: 1em;
        margin-right: 0;
        flex: 0;
    }

    .wicked-nav .main-nav {
        flex-direction: column;
        gap: 1em;
    }

    h1 {
        min-width: 0;
        font-size: 1.5rem;
    }
}



</pre></body></html>