:root {
    /* ── Font Families ── */
    --font-body: "Trebuchet MS", Arial, Helvetica, sans-serif;
    --font-display: 'Brother-1816', Helvetica, Arial, serif;
    --font-nav: "trajan-pro-3";
    --font-nav-2: "trajan-pro-3", serif;
    --font-fallback: Arial, Helvetica, sans-serif;

    /* ── Colors ── */
    --brown-dark: #452508;
    --gray-light: #cccccc;
    --orange-brand: #b45313;
    --gray-text: #5f5f5f;
    --orange-hover: #db7f31;
    --white: #ffffff;
    --blue-event: #225779;
    --green-class: #7c9343;
    --orange-archive: #bd7128;
    --black: #000000;
    --gray-disabled: #888888;
    --brown-selected: #9f5320;
    --red-brown: #993300;
    --brown-nav: #40290b;
    --green: #008000;
    --red-phone: #9e2d33;
    --red-disclaimer: #b22222;
    --olive-about: #817f23;
    --brown-accent: #854516;
    --red-recipe: #893136;
    --brown-caption: #6b4300;
    --brown-deep: #593700;
    --green-dark: #3b630e;
    --gray-warm: #665c53;
    --red-error: #990000;
    --gray-border: #666666;
    --overlay-dark: rgba(0,0,0,.85);
    --overlay-hover: rgba(0,0,0,.7);
    --tan-rule: #c9b9a6;
    --cream-bg: #faf7f3;
    --tan-border: #e5d9cc;
    --brown-tint: rgba(133,69,22,0.06);
    --tan-muted: #a89580;
    --brown-dark-alpha: rgba(69,37,8,0.25);
    --orange-brand-alpha: rgba(180,83,19,0.55);
    --green-muted: #6b7c3e;
    --green-muted-alpha: rgba(107,124,62,0.6);
    --tan-input-border: #d4c4b0;
    --calm-blue: #467886;
}

html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 12px;
    color: var(--brown-dark);
    text-align: center;
    overflow-y: scroll;
    height: 100%;
}

table {
    float: none;
    width: 100%;
}
figure.table {
    margin:0;
}

.clearfix:after {
    content: " ";
    display: block;
    height: 0;
    font-size: 1px;
    line-height: 0px;
    clear: both;
    *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );
}

.condensedparagraph {
    margin: 0;
    margin-bottom: 0px;
}

.colordisabled {
    color: var(--gray-light);
}

.bg-pattern {
    background: url(../graphics/paper-pattern-swatch-64px-about-blog.png);
}

body.index {
    font-family: var(--font-display);
    font-weight: 200;
}

body.index #content {
    margin-bottom: 0;
    height: auto;
    margin-top: 6px;
}

body.index #content #contentbox {
    height: auto;
}

.indexcontent {
    height: 100%;
}

#sitemap ul,
#rightcolumnwrap ul,
.item-navigation ul,
#headerbox ul {
    margin: 0;
    padding: 0;
}

#headerbox ul {
    width: 100%;
}

#sitemap li,
#rightcolumnwrap li,
.item-navigation li,
#headerbox li {
    list-style: none;
}

.shop-navigation-container .item-navigation li > a {
    display: block;
}

#headerbox .navigation.menulist li,
#headerbox .navigation.menulist li a,
#headerbox .navigation.menulist li a:link,
#headerbox .navigation.menulist li a:hover {
    font-family: var(--font-nav);
    font-size: 15px;
}

#headerbox .navigation.menulist li,
#headerbox .navigation.menulist li a,
#headerbox .navigation.menulist li a span {
    white-space: nowrap;
}

.wrapper,
.standard-container {
    position: relative;
    width: 980px;
    margin-left: auto;
    margin-right: auto;
}

.autowrap {
    position: relative;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

#footer .standard-container {
    text-align: left;
}

a {
    text-decoration: none;
}

a,
a:link,
a:visited {
    color: var(--calm-blue);
}

a:hover {
    color: var(--orange-brand);
}


#contentbox a,
#contentbox a:link,
#contentbox a:visited {
    color: var(--calm-blue);
}

#contentbox .item-navigation a,
#contentbox .item-navigation a:link,
#contentbox .item-navigation a:visited,
#contentbox #rightcolumnwrap a,
#contentbox #rightcolumnwrap a:link,
#contentbox #rightcolumnwrap a:visited {
    color: var(--brown-dark);
}

#contentbox .item-navigation .categoryListHeader a:link,
#contentbox .item-navigation .categoryListHeader a:hover,
#contentbox .item-navigation .categoryListHeader a:visited {
    color: var(--orange-brand);
}

.navigation a,
.navigation a:link,
.navigation a:visited {
    color: var(--brown-dark);
}

/* BEGIN HOVER STYLES */

#header-navigation .navigation li:hover,
#header .navigation li:hover,
#header .navigation li.isSelected,
#header .navigation li span.isSelected,
#header .navigation li a:hover,
#header .navigation li.isSelected a,

#controlbox .mininav li:hover {
    color: var(--orange-brand);
}

#contentbox #rightcolumnwrap a:hover,
#contentbox #tipcase a:hover,
#contentbox #tipcase a span:hover,
#contentbox #showcase a:hover,
#contentbox #showcase a span:hover,

#sitemap a li:hover,
#sitemap a:hover {
    /*text-decoration: underline;*/
    color:var(--orange-hover);
}

#contentbox .item-navigation a.isSelected,
#contentbox .item-navigation li.isSelected a,
#contentbox .item-navigation li.isSelected a:link,
#contentbox .item-navigation li.isSelected a:visited,
#contentbox .item-navigation li:hover a,
.item-navigation li.isSelected {
    color: var(--orange-hover);
}

#contentbox a li:hover,
#contentbox a:hover {
    color: var(--orange-hover);
}

#contentbox #content-navigationbox li.isSelected,
#contentbox #content-navigationbox li:hover {
    color: var(--orange-hover);
    cursor: default;
}

.news-submit-btn-container {
    text-align: right;
}

#news-submit-txtbtn.submit:hover {
    color: var(--orange-hover);
    /*color: var(--orange-brand);*/
    cursor:pointer;
}

#news-submit-txtbtn {
    text-align: right;
    font-size: 12px;
    font-weight: 500;
}

/*1099n*/

.eventbox .event-detail-container {
    padding-left: 10px;
}

.eventbox div.evtcls {
    padding-bottom: 1px;
}

#eventbox div.sep {
    padding-bottom: 5px;
}

.eventbox .clsheader {
    color: var(--white);
    font-size: 15px;
    line-height: 27px;
    background-color: var(--blue-event);
    margin-bottom: 15px;
    /* padding does not register when image is floated before. The image
        controls with its own padding. When the image is missing, this 
        padding kicks in*/    
     padding-left: 10px;
}

.eventbox .clsheader.classes {
    background-color: var(--green-class);
}

.eventbox .clsheader.archcls {
    background-color: var(--orange-archive);
}

.eventbox .clsheader.events {
    background-color: var(--blue-event);
}

.eventbox .clstitle,
.eventbox .clslocation,
.eventbox .clstime {
    font-size: 14px;
}

.eventbox .clsprice {
    color: var(--black);
    font-weight: bold;
    font-size: 16px;
}

.eventbox .clsdirections a:link,
.eventbox .clsdirections a:hover,
.eventbox .clsdirections a:visited,
.eventbox .clsdirections {
    color: var(--orange-archive) !important;
}

.eventbox.flexbox > div:nth-child(even) {
    flex-grow: 1;
}

#contentbox li.no-list-style {
    list-style: none;
}

.mobilelayer,
.mobileonly {
    display: none;
}

.toUpperCase {
    text-transform: uppercase;
}

.italics {
    font-style: italic;
}

.colorDisabled {
    color: var(--gray-disabled);
}

.isButton {
    cursor: pointer;
}

.isLiveButton {
    cursor: pointer;
}

.buttonmode {
    cursor: pointer;
}

.hidden {
    display: none;
    opacity: 0.0;
    filter: alpha(opacity=0);
}

.rounded {
    border: 1px solid;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.bxshade {
    box-shadow: 0px 2px 2px #efefef;
}

#header-navigation {
    height: 35px;
    background-image: url(../graphics/gray-bar-dropdown.png);
    background-repeat: repeat-x;
}

#footer {
    height: 32px;
    /*background-image: url(../graphics/social-strip-home.png);
    background-repeat:repeat-x;*/
    background-color: var(--white);
    position: relative;
}

#footer.page {
    background-image: url(../graphics/social-strip-about-blog.png);
}

.navigation li {
    display: inline-block;
    padding-left: 20px;
    padding-right: 20px;
    font-weight: lighter;
    font-size: 14px;
    text-transform: uppercase;
    cursor: pointer;
}

#headerbox .navigation.leftbox li {
    padding-left: 20px;
    padding-right: 20px;
}

#headerbox .navigation.rightbox li {
    padding-left: 20px;
    padding-right: 20px;
}

#headerbox .navigation li {
    position: relative;
}

#headerbox .navigation span.isSelected {
    display: inline-block;
}

#headerbox .navigation li:hover:after,
#headerbox .navigation li.isSelected:after,
#headerbox .navigation span.isSelected:after {
    content: '';
    width: 100%;
    height: 7px;
    left: 0;
    top: 100%;
    position: absolute;
    background-image: url(../graphics/menu-design.svg);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
}

/*1099n*/

#controlbox {
    z-index: 151;
    height: 25px;
    position: absolute;
    -webkit-transform: translate(-50%, 0px);
    -ms-transform: translate(-50%, 0px);
    transform: translate(-50%, 0px);
    left: 50%;
}

#headerbox #controlbox .mininav .mobilemenu {
    display: none;
}

#controlbox .mininav {
    position: absolute;
    width: 200px;
    padding-left: 20px;
    padding-right: 20px;
    font-family: var(--font-display);
    font-weight: 200;
}

.mininav li {
    font-family: var(--font-display);
    padding-left: 8px;
    padding-right: 8px;
    font-size: 9px;
    text-transform: uppercase;
    cursor: pointer;
}

#headerbox #controlbox .mininav li {
    padding: 0;
}

.mininav li.divider {
    background-image: url(../graphics/top-nav-spacer-line.png);
    background-repeat: no-repeat;
    background-position: right center;
}

#leftnavigation li {
    float: right !important;
}

#header .mnuindextd,
#header .mnuhometd {
    width: 78px;
}

#header .btnindex,
#header .btnhome {
    background-image: url(../graphics/button-home-off.png);
    background-repeat: no-repeat;
    cursor: pointer;
    width: 56px;
    height: 30px;
}

#header .btnindex.isSelected,
#header .btnhome.isSelected,
#header .btnindex:hover,
#header .btnhome:hover {
    background-image: url(../graphics/button-home-over.png);
    background-repeat: no-repeat;
}

#header .mnushoptd {
    width: 66px;
}

#header .btnshop {
    background-image: url(../graphics/button-shop-off.png);
    background-repeat: no-repeat;
    cursor: pointer;
    width: 44px;
    height: 30px;
}

#header .btnshop.isSelected,
#header .btnshop:hover {
    background-image: url(../graphics/button-shop.png);
    background-repeat: no-repeat;
}

#header .mnubookstd {
    width: 80px;
}

#header .btnbooks {
    background-image: url(../graphics/button-books-off.png);
    background-repeat: no-repeat;
    cursor: pointer;
    width: 58px;
    height: 30px;
}

#header .btnbooks.isSelected,
#header .btnbooks:hover {
    background-image: url(../graphics/button-books-over.png);
    background-repeat: no-repeat;
}

#header .mnueventstd {
    width: 172px;
}

#header .btnevents {
    background-image: url(../graphics/button-classes-events-off.png);
    background-repeat: no-repeat;
    cursor: pointer;
    width: 150px;
    height: 30px;
}

#header .btnevents.isSelected,
#header .btnevents:hover {
    background-image: url(../graphics/button-classes-events-over.png);
    background-repeat: no-repeat;
}

#header .mnupkblogtd,
#header .mnublogtd {
    width: 99px;
}

#header .btnpkblog,
#header .btnblog {
    background-image: url(../graphics/button-pkblog-off.png);
    background-repeat: no-repeat;
    cursor: pointer;
    width: 70px;
    height: 30px;
}

#header .btnpkblog.isSelected,
#header .btnblog.isSelected,
#header .btnpkblog:hover,
#header .btnblog:hover {
    background-image: url(../graphics/button-pkblog-over.png);
    background-repeat: no-repeat;
}

#header .mnurecipestd,
#header .mnurecipetd {
    width: 99px;
}

#header .btnrecipes,
#header .btnrecipe {
    background-image: url(../graphics/button-recipes-off.png);
    background-repeat: no-repeat;
    cursor: pointer;
    width: 62px;
    height: 30px;
}

#header .btnrecipes.isSelected,
#header .btnrecipe.isSelected,
#header .btnrecipes:hover,
#header .btnrecipe:hover {
    background-image: url(../graphics/button-recipes-over.png);
    background-repeat: no-repeat;
}

#header .mnuabouttd {
    width: 91px;
}

#header .btnabout {
    background-image: url(../graphics/button-about-off.png);
    background-repeat: no-repeat;
    cursor: pointer;
    width: 58px;
    height: 30px;
}

#header .btnabout.isSelected,
#header .btnabout:hover {
    background-image: url(../graphics/button-about-over.png);
    background-repeat: no-repeat;
}

#controlbox .mininav li.isSelected,
#header .navigation li.isSelected,
#header-navigation .navigation li.isSelected {
    color: var(--brown-selected);
}

li.slide-nav-dot {
    float: left;
    padding-left: 2px;
    height: 22px;
    width: 22px;
    background-image: url(../graphics/banner-dot-white.png);
    background-repeat: no-repeat;
    background-position: center center;
    cursor: default;
}

li.slide-nav-dot:hover,
li.slide-nav-dot.isSelected {
    background-image: url(../graphics/banner-dot-orange.png);
}

#banner-narrow #main-image,
#banner-extended #main-image {
    background-repeat: no-repeat;
    background-position: center center;
    /*width: 1920px;
    min-width:960px;*/
    
    position:relative;
    width: 100%;
    height: 100%;
    /*-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;*/
    background-size: cover;
}

#banner-narrow #main-image {
    background-image: url(../images/banner/home/spring-book.jpg);
}

#banner-extended #main-image {
    background-image: none;
}

#banner-narrow #main-image {
    background-image: url(../images/banner/pages/about.jpg);
}

#banner-narrow #main-image.eventspage,
#banner-narrow #main-image.privacypage,
#banner-narrow #main-image.termspage,
#banner-narrow #main-image.aboutpage {
    background-image: url(../images/banner/pages/about2.jpg);
}

#banner-narrow #main-image.eventspage {
    background-image: url(../images/banner/pages/events.jpg);
}

#banner-narrow #main-image.shoppage {
    background-image: url(../images/banner/pages/shopping.jpg);
}

#banner-narrow #main-image.checkoutpage {
    background-image: none;
}

#banner-narrow #main-image.bookpage,
#banner-narrow #main-image.shopbannerID1 {
    background-image: url(../images/banner/pages/spring-book.jpg);
}
#banner-narrow #main-image.shopbannerID2 {
    background-image: url(../images/banner/pages/shopping.jpg);
}
#banner-narrow #main-image.shopbannerID3 {
    background-image: url(../images/banner/pages/shopping.jpg);
}

#banner-narrow #main-image.herbspage {
    background-image: url(../images/banner/pages/herbs2.jpg);
}

#banner-narrow #main-image.saltpepperpage {
    background-image: url(../images/banner/pages/pepper.jpg);
}

#banner-narrow #main-image.oilpage {
    background-image: url(../images/banner/pages/olive-oil.jpg);
}

#banner-narrow #main-image.teapage {
    background-image: url(../images/banner/pages/tea.jpg);
}

#banner-narrow #main-image.jampage {
    background-image: url(../images/banner/pages/jam.jpg);
}

#banner-narrow #main-image.woodenpage {
    background-image: url(../images/banner/pages/wooden-items.jpg);
}

#banner-narrow #main-image.ceramicpage {
    background-image: url(../images/banner/pages/ceramics2.jpg);
}

#banner-narrow #main-image.teadessertpage {
    background-image: url(../images/banner/pages/tea-and-desert.jpg);
}

#banner-narrow #main-image.linenpage {
    background-image: url(../images/banner/pages/linen.jpg);
}

#banner-narrow #main-image.giftsetpage {
    background-image: url(../images/banner/pages/gift-sets3.jpg);
}

#banner-narrow #main-image.saladbowlpage {
    background-image: url(../images/banner/pages/salad-bowl.jpg);
}

#banner-narrow #main-image.boardplatterpage {
    background-image: url(../images/banner/pages/wood-boards.jpg);
}

#banner-narrow #main-image.cookwarepage {
    background-image: url(../images/banner/pages/cookware2.jpg);
}

#banner-narrow #main-image.saltcellarpage {
    background-image: url(../images/banner/pages/salt-cellars.jpg);
}

#banner-narrow #main-image.articlespage {
    background-image: url(../images/banner/pages/articles.jpg);
}

#banner-narrow #main-image.recipespage {
    background-image: url(../images/banner/pages/recipes.jpg);
}

#banner-narrow #main-image.blogpage {
    background-image: url(../images/banner/pages/currants-blog.jpg);
}

#banner-narrow #main-image.testimonialspage {
    background-image: url(../images/banner/pages/testimonials.jpg);
}

/* not used but for testing*/

#baseelementswrapper {
    position: relative;
    height: 100%;
    background-color: var(--red-brown);
}

#sitemap {
    height: 288px;
    color: var(--white);
    position: relative;
    background-image: url(../graphics/site-map-bkg.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

#sitemap #sitecolumnwrapper {
    position: relative;
    width: 960px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 25px;
}

#sitemap .sitecolumn {
    position: relative;
    float: left;
    width: 146px;
    padding-left: 10px;
    border: 1px dotted var(--white);
    border-top: none;
    border-right: none;
    border-bottom: none;
}

/* typically reserved for the last column.
   Adjustments will affect the other columns,
   so increases here must apply decreases to
   .sitecolumn */

#sitemap .sitecolumn.bigbox {
    width: 180px;
    padding-left: 10px;
}

#sitemap .sitecolheader a,
.sitecolumn .sitecolheader {
    color: var(--orange-hover);
    text-transform: uppercase;
    text-align: left;
    font-size: 12px;
}

.sitecolumn .sitecolheader.instack {
    padding-top: 10px;
}

#sitemap a,
#sitemap li {
    text-align: left;
    font-size: 11px;
    line-height: 15px;
    color: var(--white);
    letter-spacing: .5px;
}

#sitemap li > a {
    display: block;
}

#sitemap #legalstatement {
    position: absolute;
    bottom: 0;
    height: 25px;
    width: 960px;
    text-align: center;
    font-size: 10px;
    left: 50%;
    margin-left: -480px;
}

#sitemap .outside-container {
    height: 100%;
}

#sitemap .inner-container {
    width: 100%;
    height: 100%;
}

#headerbox {
    /*padding-top: 5px;*/
    background-image:url(../graphics/paper-pattern-swatch-64px.jpg);
    position: relative;
    width: 100%;
    height: 102px;
    top: 0px;
}

#header {
    text-align: center;
    z-index: 150;
    padding-top: 5px;
}

#banner-narrow {
    position: relative;
    height: 175px;
    /*height: 143px;*/
    text-align:center;
    width: 100%;
}

#banner-narrow.checkoutpage {
    position: relative;
    height: 75px;
    text-align: center;
    width: 100%;
    background-color: var(--white);
}

#banner-extended {
    position: relative;
    height: 335px;
    text-align: center;
    width: 100%;
}

#banner-narrow #header-navigation,
#banner-extended #header-navigation {
    position: relative;
    top: 0;
    left: 0;
    z-index: 125;
}

#header-navigation .navigation {
    line-height: 35px;
    color: var(--brown-nav);
}

#banner-narrow #slide-container,
#banner-extended #slide-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*1099n*/

#slide-container.papertear:after,
#slide-container.papertear.shop:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 130;
    pointer-events: none;
    background-image: url(../graphics/top-banner-strip-alt1.png),url(../graphics/bottom-banner-strip-shop.png);
    background-position: top center, bottom center;
    background-size: cover auto;
    background-repeat: repeat-x;
}

#slide-container.papertear.page:after {
    background-image: url(../graphics/top-banner-strip-alt1.png),url(../graphics/bottom-banner-strip-shop.png);
}

#slide-container.papertear.index:after {
    background-image: url(../graphics/top-banner-strip-alt1.png),url(../graphics/bottom-banner-strip-shop.png);
}

/*bottom-banner-strip-index.png*/

#banner-extended #slide-container {
    z-index: 120;
}

#slide-container .billboarditem {
    height: 100%;
}
#slide-container .billboards-container {
    height:100%;
    overflow: hidden;
}
#slide-container .billboarditem:first-child {
    display:block;
}
#slide-container .billboarditemimagewrapper {
    height:100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: 0;
}

#banner-narrow #dot-navigation,
#banner-extended #dot-navigation {
    position: relative;
    top: 175px;
    text-align: center;
    height: 15px;
    z-index: 125;
}

#banner-narrow #dot-navigation {
    top: 68px;
}

#content {
    position: relative;
    min-height: 275px;
}

#content #contentbox {
    position: relative;
    text-align: left;
    height: auto;
    font-size: 14px;
    line-height: 22px;
}

#content #contentbox input {
    font-size: 13px;
}

#contentbox #showcase {
    width: 425px;
    height: 100%;
    margin-top: -11px;
    /*height: 187px;
    float:left;
    margin-top: 25px;*/;
}

#contentbox #showcase a,
#contentbox #showcase a:link,
#contentbox #showcase a:visited {
    color: var(--brown-dark);
}

#contentbox #tipcase a,
#contentbox #tipcase a:link,
#contentbox #tipcase a:visited {
    color: var(--green);
}

#pagecontent {
    position: relative;
}

#pagecontent #contentbox {
    position: relative;
    text-align: center;
    min-height: 500px;
    font-size: 12px;
    line-height: 17px;
}

#pagecontent #contentbox.writer {
    line-height: 17px;
    font-size: 12px;
}

#rightcolumnwrap p {
    margin: 0;
    margin-bottom: 0px;
}

#centercolumnwrap p {
    margin: 0;
    margin-bottom: 8px;
}

.condensedparagraph,
#rightcolumnwrap p.condensedparagraph,
#centercolumnwrap p.condensedparagraph {
    margin: 0;
    margin-bottom: 0px;
}

#contentbox .cms ul {
    margin: 0;
    padding: 15px;
}

#contentbox .cms ul li,
#contentbox .cms li {
    list-style: inherit;
}

.firstlettercap img {
    float: left;
    padding-right: 3px;
}

#contentbox .cellleft {
    width: 175px;
    padding-right: 10px;
}

#contentbox .cellcenter {
    width: 500px;
    padding-right: 12px;
}

#contentbox .cellright {
    width: 195px;
    margin-left: 10px;
}

#contentbox #content-navigationbox li {
    text-align: right;
    height: 16px;
    font-size: 10px;
}

#powerby {
    position: fixed;
    bottom: 105px;
    right: 0;
    z-index: 200;
}

.columnsepin,
.verticaldots-left {
    background-image: url(../graphics/vertical-dotted-line-dot.png);
    background-repeat: repeat-y;
    background-position: top left;
}

.columnsepout,
.verticaldots-right {
    background-image: url(../graphics/vertical-dotted-line-dot.png);
    background-repeat: repeat-y;
    background-position: top right;
}

.rowsepout,
.rowsextpout {
    background-image: url(../graphics/horizontal-dotted-line-dot.png);
    background-repeat: repeat-x;
    background-position: bottom left;
    margin-bottom: 5px;
    margin-right: 15px;
    padding-bottom: 5px;
}

.rowsextpout {
    margin-right: 0px;
}

.topshift {
    top: -75px;
}

.topshiftext {
    top: -80px;
}

.bottomshiftupext {
    margin-bottom: -90px;
}

#contentbox #centercolumnwrap {
    margin: auto;
    width: 565px;
    text-align: left;
}

#contentbox #colsinglerightwrap {
    margin: auto;
    text-align: left;
}

.columnsepout h1.contact {
    margin: 0;
    font-size: 12px;
    line-height: 17px;
    font-family: var(--font-body);
    color: var(--brown-dark);
    font-weight: bold;
}

.columnsepout h1.support {
    margin: 0;
    font-size: 12px;
    line-height: 17px;
    font-family: var(--font-body);
    color: var(--brown-dark);
    font-weight: bold;
}

#footer .iconpad {
    padding-right: 27px;
}

#footer ul {
    float: left;
    margin: 0;
    padding: 0;
}

#footer ul li {
    float: left;
    list-style: none;
    margin: 0;
    line-height: 32px;
    padding: 0;
}

#footer ul.f-right {
    float: right;
}

.socialicon {
    width: 21px;
    height: 20px;
}
.socialicon a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

#footer .socialicon {
    /*float: left;*/
    cursor:pointer;
    height: 32px;
}

#facebookicon {
    position: relative;
    background-image: url(../graphics/social_icons_facebook_off.png);
    background-repeat: no-repeat;
    background-position: left center;
}

#twittericon {
    position: relative;
    background-image: url(../graphics/social_icons_tweet_off.png);
    background-repeat: no-repeat;
    background-position: left center;
}

#pinteresticon {
    position: relative;
    background-image: url(../graphics/social_icons_pinterest_off.png);
    background-repeat: no-repeat;
    background-position: left center;
}

#instagramicon {
    position: relative;
    background-image: url(../graphics/social_icons_instagram_off.png);
    background-repeat: no-repeat;
    background-position: left center;
}

#emailicon {
    position: relative;
    background-image: url(../graphics/social_icons_mail_off.png);
    background-repeat: no-repeat;
    background-position: left center;
}

#facebookicon:hover {
    background-image: url(../graphics/social_icons_facebook_over.png);
}

#twittericon:hover {
    background-image: url(../graphics/social_icons_tweet_over.png);
}

#pinteresticon:hover {
    background-image: url(../graphics/social_icons_pinterest_over.png);
}

#instagramicon:hover {
    background-image: url(../graphics/social_icons_instagram_over.png);
}

#emailicon:hover {
    background-image: url(../graphics/social_icons_mail_over.png);
}

.phonenumber {
    color: var(--red-phone);
    font-weight: 500;
    font-size: 14px;
    text-align: right;
    font-family: var(--font-display);
}

.event-class-container .event-footer {
    margin-left: 25px;
    margin-top: 20px;
    padding: 8px 15px;
    font-size: 15px;
    font-weight: 700;
    background-color: var(--blue-event);
    color: var(--white);
    line-height: 1.2;
}

.event-class-container .event-disclaimer {
    color: var(--red-disclaimer);
    padding-bottom: 10px;
}

.eventcontainer {
    padding-bottom: 35px;
}

#contentbox .event-disclaimer a,
#contentbox .event-disclaimer a:link, 
#contentbox .event-disclaimer a:visited,
#contentbox .event-disclaimer a:hover {
    color: var(--red-disclaimer);
    text-decoration: underline;
}

.aboutheader {
    color: var(--olive-about);
    font-size: 16px;
    font-weight: bold;
}

h1.aboutheader {
    margin: 0;
    margin-bottom: 8px;
    color: var(--olive-about);
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
}

img.about-main {
    position: absolute;
    /*top: 145px; 
    right:140px;*/
    
    top: 175px;
    right: 237px;
}

img.about-main-placeholder {
    float: right;
}

.recipecat_ud_tips {
    display: none;
}

.recipeinstruction {
    line-height: 16px;
}

#contentbox #aboutintro {
    color: var(--brown-accent);
    font-size: 14px;
    padding-bottom: 10px;
    line-height: 24px;
}
#contentbox #aboutintro .title {
    font-family: var(--font-nav-2);
  font-size: 19px;
  font-weight: 300;
}

#contentbox #clsintro,
#contentbox .shopintro,
.event-class-container .event-header {
    margin-bottom: 10px;
    position: relative;
}

#contentbox #clsintro img,
#contentbox .shopintro img,
.event-class-container .event-header img {
    padding-bottom: 5px;
}

#contentbox .widemargin,
#contentbox .shopintro.widemargin,
.event-class-container .event-header.widemargin {
    margin-left: 15px;
}

.event-class-container .event-header .category-description-title {
    font-family: var(--font-nav-2);
    font-weight: 400;
    font-size: 35px;
    line-height: 1;
}

/* applies when image is absent */

#contentbox .shopintro .header {
    font-size: 36px;
    padding-bottom: 5px;
    line-height: 34px;
}

/* applies when image is absent */

#contentbox #clsintro .header {
    font-size: 36px;
    padding-bottom: 10px;
    padding-top: 10px;
}

#contentbox .item-navigation {
    line-height: 21px;
    font-size: 12px;
    margin-right: 8px;
    margin-top: 10px;
}

.shop-navigation-container .item-navigation,
.category-navigation-container .item-navigation {
    pointer-events: all;
}

#contentbox #rightcolumnwrap {
    margin-left: 23px;
    line-height: 18px;
    font-size: 12px;
    margin-top: 10px;
}

#rightcolumnwrap ul {
    margin-left: 8px;
}

#rightcolumnwrap ul ul {
    margin-left: 16px;
}

#contentbox #rightcolumnwrap a.isSelected,
#rightcolumnwrap li.isSelected {
    color: var(--brown-selected);
}

.recipeListHeader {
    font-size: 17px;
    font-weight: bold;
    color: var(--red-recipe);
    padding-bottom: 15px;
}

.categoryListHeader {
    font-size: 14px;
    font-weight: bold;
    color: var(--orange-brand);
}

.categoryListHeader h1 {
    font-size: 14px;
    font-weight: bold;
    color: var(--orange-brand);
    text-transform: uppercase;
    margin: 0;
}

.shopCategoryListHeader,
.shopCategoryListHeader h1 {
    font-size: 12px;
    font-weight: bold;
    color: var(--orange-brand);
    margin: 0;
    text-transform: uppercase;
}

.shopFeaturedListHeader {
    font-size: 14px;
    font-weight: bold;
    color: var(--orange-brand);
}

.featuredItemContainer .price {
    font-weight: bold;
    color: var(--black);
}

.moreinfo {
    font-size: 12px;
    font-weight: 500;
}

#showcase .showdata {
    margin-right: 10px;
    /*float: left;
    width:260px;*/;
}

/*#showcase #showimg {
    float:left;
}*/

#showcase img.showimg,
#tipcase .f-right {
    float: right;
}

#showcase img.showimg {
    margin-left: 15px;
    margin-top: 8px;
}

#tipcase img.f-right {
    margin-left: 5px;
}

#tipcase,
#contentbox #tipcase {
    width: 259px;
    height: auto;
    /*height: 127px;
    float:left;*/
    padding-left:15px;
    margin-right: 10px;
}

#tipcase #tipheader {
    font-size: 13px;
    font-weight: 500;
    color: var(--brown-accent);
    margin-top: -6px;
}

#tipcase #tipheader h1 {
    font-size: 13px;
    font-weight: 500;
    color: var(--brown-accent);
    margin: 0;
}

#contentbox #signcase {
    width: 235px;
    height: 100%;
    /*height: 127px;
    float:left;*/
    padding-left:15px;
}

#signcase #signheader {
    font-size: 13px;
    font-weight: 500;
    color: var(--green);
    margin-top: -6px;
}

#contentbox #tipcase p:first-of-type,
#contentbox #showcase p:first-of-type,
#contentbox #signcase p:first-of-type {
    margin-top: 2px;
}

#signcase input {
    width: 227px;
    padding-left: 5px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}

#signcase input#newsletter-signup-name {
    margin-bottom: 5px;
}

.termsHeader {
    font-size: 14px;
    font-weight: bold;
    line-height: 16px;
}

h1.termsHeader {
    font-size: 14px;
    font-weight: bold;
    line-height: 16px;
    margin: 0;
    margin-bottom: 8px;
    text-transform: uppercase;
    text-align: center;
}

.termsCaption {
    font-size: 12px;
    font-weight: bold;
    line-height: 14px;
}

.pterms {
    font-size: 10px;
    line-height: 14px;
}

#centercolumnwrap p.pterms {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 7px;
    padding: 0;
}

#productgrid .eventbox.stack {
    position: relative;
    width: auto;
    /*width: 245px;*/
    /*height:267px;*/
    /*padding-top:10px;*/
    padding-bottom:15px;
    text-align: left;
    font-size: 12px;
}

#productgrid .eventbox.stack img {
    /*padding-right: 10px;*/
    /*float:left;
    padding-bottom:15px;*/;
}

#productgrid .eventbox.stack img.nofloat {
    float: none;
}

/*1099n if this is still be used, check if evt has been hard-coded.
We have changed the dynamic name to events*/

.evt .evtcls {
    padding-left: 10px !important;
}

/*ARTICLES*/

.articlecontainer .categorycontainer .caption {
    display: block;
}

.articlecontainer .categorycontainer .caption,
#contentbox .articlecontainer .categorycontainer .caption a,
#contentbox .articlecontainer .categorycontainer .caption a:link,
#contentbox .articlecontainer .categorycontainer .caption a:hover,
#contentbox .articlecontainer .categorycontainer .caption a:visited {
    font-weight: 800;
    color: var(--brown-caption);
    font-size: 14px;
    font-family: var(--font-display);
}

#contentbox .articlecontainer .categorycontainer .caption a:hover {
    color: var(--orange-hover);
}

.articlecontainer .contentcontainer p {
    margin: 0px 0 10px;
    padding: 0;
}

.articlecontainer dl {
    margin: 0 0 3px 0;
}

.articlecontainer dl dd {
    margin: 0 0 0 0px;
}

#productgrid #article-container {
    padding-bottom: 25px;
    font-size: 16px;
    line-height: 25px;
    font-weight: 300;
    font-family: var(--font-display);
}

#productgrid #article-container ol {
    padding-left: 17px;
}

#productgrid #article-container ol li {
    padding-left: 12px;
}

#productgrid #article-container p {
    margin: 0px 0 10px;
    padding: 0;
}

#productgrid .articleintro {
    padding-bottom: 5px;
}

#productgrid .articleintro:not(:first-of-type) {
    padding-top: 50px;
}

#productgrid .articleintro,
#productgrid .articleintro a,
#productgrid .articleintro a:link,
#productgrid .articleintro a:hover,
#productgrid .articleintro a:visited {
    font-size: 28px;
    color: var(--brown-deep);
    font-weight: 200;
    font-family: var(--font-display);
    line-height: 1;
}

#productgrid .articleintro a:hover {
    color: var(--orange-hover);
}

#productgrid .articlesubheader {
    font-size: 12px;
    font-style: italic;
    padding-bottom: 5px;
    padding-top: 8px;
}

#productgrid #article-container img {
    display: block !important;
    padding-bottom: 12px;
    padding-top: 7px;
    height: auto !important;
    width: 100% !important;
    max-width: 682px;
}

#productgrid #article-container.landing img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    max-width: none;
    padding-bottom: 0;
    padding-top: 0;
}

#productgrid #article-container.landing .landingpreview {
    width: 100%;
    height: 200px;
    position: relative;
    overflow: hidden;
    padding-bottom: 12px;
}

.articleListHeader {
    font-size: 17px;
    font-weight: 700;
    color: var(--green-dark);
    padding-bottom: 22px;
    font-family: var(--font-display);
}

.articleListHeader h1 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--green-dark);
    font-family: var(--font-display);
}

.articleListSubheader {
    padding-bottom: 17px;
    text-transform: uppercase;
}

.articleListSubheader,
#contentbox .articleListSubheader,
#contentbox .articleListSubheader a,
#contentbox .articleListSubheader a:link,
#contentbox .articleListSubheader a:hover,
#contentbox .articleListSubheader a:visited {
    font-weight: 800;
    color: var(--brown-caption);
    font-size: 14px;
    font-family: var(--font-display);
}

#contentbox .articleListSubheader a:hover {
    color: var(--orange-hover);
}

.articlecontainer .item-navigation ul,
.articlecontainer .item-navigation dl {
    margin-left: 0px;
}

.articlecontainer .item-navigation ul {
    padding-bottom: 26px;
}

.articlecontainer .item-navigation dl + dl {
    padding-top: 15px;
}

#contentbox .articlecontainer .item-navigation ul li,
#contentbox .articlecontainer .item-navigation dl dd {
    line-height: 1em;
    margin-bottom: 7px;
}

#contentbox .articlecontainer .item-navigation ul li a,
#contentbox .articlecontainer .item-navigation ul li a:link,
#contentbox .articlecontainer .item-navigation ul li a:hover,
#contentbox .articlecontainer .item-navigation ul li a:visited,

#contentbox .articlecontainer .item-navigation dl dd a,
#contentbox .articlecontainer .item-navigation dl dd a:link,
#contentbox .articlecontainer .item-navigation dl dd a:hover,
#contentbox .articlecontainer .item-navigation dl dd a:visited {
    color: var(--gray-warm);
    line-height: 19px;
    font-size: 14px;
    font-weight: 300;
    font-family: var(--font-display);
}

#contentbox .articlecontainer .item-navigation ul li a:hover,
#contentbox .articlecontainer .item-navigation ul li a.isSelected,
#contentbox .articlecontainer .item-navigation dl dd a:hover,
#contentbox .articlecontainer .item-navigation dl dd a.isSelected,
#contentbox .articlecontainer .item-navigation dl dd span.isSelected a,
#contentbox .articlecontainer .categorycontainer .caption.isSelected a {
    color: var(--orange-hover);
}

#header .mnuarticlestd,
#header .mnuarticletd {
    width: 107px;
}

#header .btnarticles,
#header .btnarticle {
    background-image: url(../graphics/button-articles-off.png);
    background-repeat: no-repeat;
    cursor: pointer;
    width: 75px;
    height: 30px;
}

#header .btnarticles.isSelected,
#header .btnarticle.isSelected,
#header .btnarticles:hover,
#header .btnarticle:hover {
    background-image: url(../graphics/button-articles-over.png);
    background-repeat: no-repeat;
}

/*RECIPES*/

.recipecontainer .category-navigation-container .caption {
    text-transform: uppercase;
    padding-bottom: 17px;
}

.recipecontainer .category-navigation-container .subcaption,
.articlecontainer .category-navigation-container .subcaption {
    padding-bottom: 7px;
    display: inline-block;
}

.recipecontainer .category-navigation-container .subcaption,
.articlecontainer .category-navigation-container .subcaption,
#contentbox .articlecontainer .category-navigation-container .subcaption a,
#contentbox .articlecontainer .category-navigation-container .subcaption a:link,
#contentbox .articlecontainer .item-navigation dl dd .subcaption a, 
#contentbox .articlecontainer .item-navigation dl dd .subcaption a:link {
    color: var(--gray-warm);
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-display);
}

#contentbox .articlecontainer .category-navigation-container .subcaption.isSelected a,
#contentbox .articlecontainer .category-navigation-container .subcaption a:hover {
    color: var(--orange-hover);
}

#productgrid .recipeheader {
    padding: 8px 0 2px;
}

#productgrid a + .recipeheader:not(:first-of-type) {
    padding: 25px 0 2px;
}

#productgrid .recipeheader,
#productgrid .recipeheader a,
#productgrid .recipeheader a:link,
#productgrid .recipeheader a:hover,
#productgrid .recipeheader a:visited {
    font-size: 28px;
    color: var(--brown-deep);
    font-weight: 200;
    font-family: var(--font-display);
    line-height: 1;
}

#productgrid .recipeheader a:hover {
    color: var(--orange-hover);
}

.recipesubheader {
    font-size: 14px;
    padding-bottom: 18px;
}

/*added 5-6-16*/

.btn-container {
    display: inline-block;
}

.busybkg {
    position: relative;
    height: 100%;
    width: 100%;
    background: url(../graphics/busyrotation.gif) no-repeat center center;
}

form input.error {
    border: 1px solid var(--red-error) !important;
    color: var(--red-error) !important;
}

form input[type="text"] {
    margin: 0;
    padding: 0 3px;
    width: 409px;
    height: 23px;
    font-size: 12px;
    line-height: 16px;
    color: var(--brown-dark);
    border: 1px solid var(--gray-border);
}

form input[type="text"].short {
    width: 141px;
}

form textarea {
    margin: 0;
    padding: 0 3px;
    height: 100px;
    width: 409px;
    font-size: 12px;
    color: var(--brown-dark);
    border: 1px solid var(--gray-border);
    resize: vertical;
}

input.borderboxer,
textarea.borderboxer {
    /*width: 100%;*/
    /*padding:0;*/
    /*border-width:0px;*/
    
    -moz-box-sizing:border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
}

form header {
    font-weight: bold;
    vertical-align: middle;
    width: 75px;
    text-align: left;
}

/*1099n*/

.contentcontainer,
.shopcontainer,
.categorycontainer {
    text-align: left;
}

.categorycontainer .categoryListHeader {
    text-transform: uppercase;
}

.shop-navigation-container,
.category-navigation-container {
    width: auto;
    text-align: left;
    /*The div within this container must set its pointer events to
    counter this if it contains links*/
    pointer-events: none;
}

.category-navigation-container {
    width: 222px;
}

.shop-product-container,
.event-class-container {
    width: 800px;
}

.event-class-container {
    width: 682px;
}

.shop-product-container #shopintro img {
    max-width: 100%;
    height: auto;
    max-height: 37px;
    width: auto;
}

#contentbox #aboutintro img {
    max-width: 100%;
    height: auto;
    width: 332px;
    float: left;
}

/*1099n*/

/*FLEXBOX*/

.flexbox {
    display: flex;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.flexcolumn {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.flexrow {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.flexright {
    -webkit-align-items: right;
    -ms-flex-align: right;
    align-items: right;
}

.flexbetween {
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.flexaround {
    -webkit-justify-content: space-around;
    -ms-flex-pack: justify;
    justify-content: space-around;
}

.flexeven {
    -webkit-justify-content: space-evenly;
    -ms-flex-pack: justify;
    justify-content: space-evenly;
}

.flexstart {
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.flexrowstart {
    -webkit-justify-content: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
}

.flexcolumnend,
.flexrowend {
    -webkit-justify-content: flex-end;
    -ms-flex-pack: flex-end;
    justify-content: flex-end;
}

.flexcolumnstart {
    -webkit-justify-content: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
}

.flexbox.flexwrap {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flexfill {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}

/*END FLEXBOX*/

/*do not display powerby element during checkout*/

body.checkout #powerby {
    display: none;
}

/*do not display social icon elements during checkout*/

body.checkout .socialicon {
    display: none;
}

/*Article Pagination*/

.pagination-container {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px dotted var(--gray-light);
    text-align: center;
    font-family: var(--font-display);
}

.pag-btn {
    display: inline-flex;
    align-items: center;
    margin: 0 25px;
    color: var(--gray-warm);
    text-transform: uppercase;
    font-weight: 200;
    font-size: 13px;
    letter-spacing: 2px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.pag-btn:hover {
    color: var(--orange-brand) !important;
}

.pag-arrow {
    font-size: 16px;
    color: var(--orange-brand);
    display: inline-block;
    line-height: 1;
    /* The Nudge: Shifts the glyph up to fix the asymmetrical font box */
    transform: translateY(-2px);
}

/* Spacing adjustments for the symbols */

.pag-btn span:first-child {
    margin-right: 12px;
}

.pag-btn span:last-child {
    margin-left: 12px;
}

/*MEDIA*/

@media (max-width: 1020px) {
    .wrapper,
    .standard-container {
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
    }

    .standard-container {
        padding: 0 20px;
    }

    .shop-product-container {
        width: 100%;
    }

    .shopcontainer,
    .contentcontainer {
        padding-left: 20px;
        padding-right: 20px;
    }

    body.index #content,
    body.index #content #contentbox {
        height: auto;
    }

    .indexcontent.flexrow {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    #contentbox #showcase,
    #contentbox #tipcase,
    #contentbox #signcase {
        /*float: none;*/
        width: 342px;
        margin: 0 auto 20px;
        padding: 0 20px;
        height: auto;
        text-align: center;
    }

    #contentbox #tipcase.columnsepin,
    #contentbox #signcase.columnsepin {
        background: none;
    }

    #showcase img.showimg,
    #tipcase img.f-right {
        float: none;
        display: block;
        margin: 5px auto 8px;
    }

    #showcase .showdata {
        margin-right: 0;
    }

    .news-submit-btn-container {
        text-align: center;
    }

    #sitemap #sitecolumnwrapper,
    #sitemap #legalstatement {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    #sitemap #legalstatement {
        position: relative;
        height: auto;
        min-height: 25px;
        left: 0;
        margin-left: 0;
        padding-bottom: 20px;
    }

    #sitemap .sitecolumn {
        float: none;
        border: none;
        margin: 0 auto 25px;
    }

    #sitemap .sitecolumn,
    #sitemap .sitecolumn.bigbox {
        padding: 0;
        width: 200px;
    }

    #sitemap {
        height: auto;
    }

    #sitemap a, 
    #sitemap li {
        font-size: 10px;
        line-height: 1;
        margin-bottom: 13px;
    }

    #sitemap .address a, 
    #sitemap .address li {
        margin-bottom: 5px;
    }

    #sitemap .sitecolheader a,
    .sitecolumn .sitecolheader {
        font-size: 14px;
        margin-bottom: 7px;
    }

    #footer .standard-container.contactstrip {
        width: auto;
        padding: 0 30px;
    }

}

@media (max-width: 991px) {
    img.about-main-placeholder {
        display: none;
    }

    img.about-main {
        position: relative;
        top: unset;
        right: unset;
        max-width: 100%;
        height: auto;
    }

    #header .navigation.menulist {
        display: none;
    }

    #headerbox {
        height: 39px;
    }

    #headerbox #controlbox {
        padding-top: 0;
        position: absolute;
        -webkit-transform: translate(-50%, 18px);
        -ms-transform: translate(-50%, 18px);
        transform: translate(-50%, 18px);
        left: unset;
        right: 5px;
        width: auto;
    }

    #headerbox #controlbox .mininav .mobilemenu {
        display: inline-block;
    }

    #headerbox #controlbox .mininav .contactlink {
        display: none;
    }

    #banner-narrow {
        height: 46px;
    }

    #header.flexbox {
        padding-left: 20px;
        padding-right: 20px;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: flex-start;
        justify-content: flex-start;
    }

    .logo-container img {
        height: 52px;
    }

    #powerby {
        display: none;
    }

    /* MOBILE MENU */

    #mobilemenus.mobileonly {
        display: block;
    }

    #mobilemenus {
        display: block;
        z-index: 0;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        height: 0;
    }

    #topmenus-mobile {
        height: 57px;
    }

    #topmenus-mobile {
        position: absolute;
        display: none;
        z-index: 1400;
        width: 100%;
        height: 100%;
    }

    #mobilemenus.menuopen {
        z-index: 2110;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
    }

    #topmenus-mobile.menuopen {
        display: block;
    }

    body.menuopen {
        overflow: hidden;
    }

    /*used only if body has menuopen class*/

    body.menuopen #topmenus-mobile #inner-topmenus-mobile {
        overflow: auto;
        overflow-y: scroll;
    }

    #topmenus-mobile #inner-topmenus-mobile {
        position: relative;
        padding: 0;
    }

    #topmenus-mobile .overlay {
        height: 100%;
        background: var(--overlay-dark);
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }
    .pkn-mobile-nav-inner {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }
    .mobilelayer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100px;
    }

    #mobilemenus .menulist a {
        outline: none;
    }

    /*Takes over from -tap highlight
    However, A tags are still controlled by -tap*/

    #topmenus-mobile .navigation.menulist li,
    #topmenus-mobile .navigation.menulist li a, 
    #topmenus-mobile .navigation.menulist li a:link{
        color: var(--white);
    }
    #topmenus-mobile .navigation.menulist li a:hover {
        color: var(--orange-hover);
    }

    #topmenus-mobile .navigation li:hover:after, 
    #topmenus-mobile .navigation li.isSelected:after, 
    #topmenus-mobile .navigation span.isSelected:after {
        content: '';
        position: absolute;
        background: none;
    }

    #topmenus-mobile .navigation.menulist li,
    #topmenus-mobile .navigation.menulist li a,
    #topmenus-mobile .navigation.menulist li a:link, 
    #topmenus-mobile .navigation.menulist li a:hover {
        font-size: 17px;
    }

    #topmenus-mobile .navigation.menulist li {
        margin-bottom: 20px;
    }

    #topmenus-mobile .navigation.menulist:first-child li:first-child {
        margin-top: 50px;
    }

    #topmenus-mobile .navigation.menulist li:active {
        background-color: var(--overlay-hover);
    }

    #topmenus-mobile .navigation.menulist.flexrow {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    /*We set this here when the mobile styles kick in, but it could
    be set in the main style section as well*/

    #headerbox #controlbox.menuopen {
        z-index: 2111;
        position: fixed;
        right: 5px;
        top: 1px;
    }

    #headerbox #controlbox.menuopen .menulist > *:not(.mobilemenu) {
        z-index: -1;
        visibility: hidden;
    }

}

@media (max-width: 880px) {
    #productgrid #article-container img {
        height: auto !important;
        width: 100% !important;
    }

}

@media (max-width: 840px) {
    .eventbox.flexrow {
        webkit-flex-direction: column-reverse;
        flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
    }

    .eventbox.flexbox > div:nth-child(2n) {
        width: 100%;
    }

}

@media (max-width: 930px) {
    .eventcontainer {
        padding-left: 20px;
        padding-right: 20px;
    }

}

@media (max-width: 768px) {
    #sitemap #legalstatement {
       padding-left: 0px;
       padding-right: 0px; 
    }
}

@media (max-width: 722px) {
    .event-class-container {
        width: 100%;
    }

}

@media (max-width: 640px) {
    .eventcontainer .category-navigation-container {
        display: none;
    }

    .contentcontainer.flexrow {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .category-navigation-container {
        pointer-events: all;
    }

    .articleListHeader {
        position: relative;
        cursor: pointer;
        padding-bottom: 0;
        margin-bottom: 20px;
        border-bottom: 1px solid var(--green-dark);
    }

    .articleListSubheader {
        display: none;
    }

    .articleListHeader {
        /*use the visibility prop when using the 
        hamburger option below*/
        visibility: hidden;
    }

    .articleListHeader::after {
        /*
        content: '\25BA';
        position: absolute;
        width: 16px;
        height: 16px;
        right: -4px;
        top: 0;
        font-size: 14px;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
        */
        
        content: '';
        position: absolute;
        width: 29px;
        height: 29px;
        top: 0;
        font-size: 14px;
        font-weight: bold;
        font-family: var(--font-fallback);
        background: url(../graphics/hamburger-menu-dark-off.svg) no-repeat;
        background-size: 100%;
        left: 0;
        visibility: visible;
    }

    .category-navigation-container {
        height: 35px;
        overflow: hidden;
        margin-bottom: 20px;
        pointer-events: all;
        -webkit-transition: height 250ms ease-in-out;
        -o-transition: height 250ms ease-in-out;
        -moz-transition: height 250ms ease-in-out;
        transition: height 250ms ease-in-out;
    }

    #productgrid #article-container {
        font-size: 15px;
    }

}

@media (max-width: 620px) {
    #contentbox.boxresponsive #centercolumnwrap {
        width: 100%;
        padding: 0 20px;
    }

    .boxresponsive .columnsepin,
    .boxresponsive .columnsepout {
        background: none;
    }

    .boxresponsive img.responsive {
        max-width: 100%;
        height: auto;
    }

}

@media (max-width: 500px) {
    .event-disclaimer br {
        display: none;
    }

    #contentbox #showcase,
    #contentbox #tipcase,
    #contentbox #signcase {
        width: 100%;
    }

}

@media (max-width: 320px) {
    #footer {
        height: auto;
    }

    #footer ul,
    #footer ul.f-right {
        float: none;
    }

}

/* 
   Pascale's Kitchen Homepage Redesign
   New classes prefixed with 'pkn-' to avoid conflicts with existing stylesheets
   
   Design References:
   - Aesop: visible thin borders, warm earthy tones, alternating section backgrounds
   - Kinfolk: thin horizontal rule below intro, editorial spacing
   - Debaere Bakery: card-style containers for bottom sections
   - Bread Alone: subtle right-arrow on CTAs
*/

/* ============================================
   OVERRIDES FOR EXISTING LAYOUT CONSTRAINTS
   ============================================ */

#footer .standard-container.contactstrip {
    max-width: 1100px;
    width: auto;
    padding: 0 30px;
}

@media (max-width: 768px) {
    #footer .standard-container.contactstrip {
        padding: 0 15px;
        margin-top: 5px;
    }

    /* Tipcase + Signcase responsive adjustments */

    .pkn-tipcase-inner {
        padding: 12px 15px;
    }

    .pkn-tipcase {
        grid-template-columns: auto 1fr;
        align-items: start;
    }

    .pkn-tipcase__actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        margin-top: 6px;
    }

    .pkn-signcase--split {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .pkn-signcase__grid {
        grid-template-columns: 1fr;
    }

    .pkn-signcase__actions {
        justify-content: flex-end;
    }

    .pkn-intro-wrapper {
        padding: 25px 15px 20px;
    }

    .pkn-intro-wrapper h1 {
        font-size: 32px;
        margin-bottom: 15px;
    }

    .pkn-intro-wrapper p {
        font-size: 15px;
        line-height: 1.6;
    }

    .pkn-intro-rule {
        margin-top: 22px;
    }

    /* Stack sections vertically on mobile */

    .pkn-section {
        flex-direction: column;
        gap: 20px;
        padding: 35px 30px;
    }

    .pkn-section.pkn-section--reverse {
        flex-direction: column;
    }

    .pkn-section-img,
    .pkn-section-text {
        flex: 0 0 100%;
    }

    .pkn-section-text {
        padding-top: 0;
    }

    .pkn-section-text h2 {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .pkn-section-text p {
        font-size: 15px;
        max-width: 100%;
    }

    /* Stack bottom cards vertically */

    .pkn-bottom-cards-wrapper {
        padding: 0 15px;
        margin-top: 5px;
    }

    .pkn-bottom-cards {
        flex-direction: column;
        gap: 20px;
    }

    .pkn-card {
        padding: 22px 20px 20px;
    }

    .pkn-card-feature .pkn-card-body img {
        width: 90px;
    }

}

/* ============================================
   INTRO SECTION
   ============================================ */

.pkn-intro-wrapper {
    text-align: left;
    margin: 0 auto 0;
    max-width: 870px;
    padding: 5px 30px 30px;
}

.pkn-intro-wrapper h1 {
    font-family: var(--font-display);
    font-weight: 200;
    font-size: 48px;
    color: var(--brown-dark);
    margin: 0 0 20px 0;
    line-height: 1.3;
    letter-spacing: 0.5px;
}

.pkn-intro-wrapper p {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 18px;
    color: var(--brown-dark);
    line-height: 1.7;
    margin: 0;
}

/* Thin decorative rule below intro (Kinfolk-inspired) */

.pkn-intro-rule {
    width: 80px;
    height: 1px;
    background-color: var(--tan-rule);
    margin: 30px 0 0 0;
}

/* ============================================
   SECTIONS CONTAINER
   ============================================ */

.pkn-sections-container {
    margin: 0 auto;
    width: auto;
    padding: 0;
}

/* ============================================
   INDIVIDUAL SECTION BLOCKS
   ============================================ */

.pkn-section-wrap {
    width: 100%;
}

.pkn-section-wrap--alt {
    background-color: var(--cream-bg);
}

.pkn-section {
    display: flex;
    align-items: flex-start;
    gap: 50px;
    padding: 45px 30px;
    max-width: 1100px;
    border-bottom: 1px solid var(--tan-border);
    margin: 0 auto;
}

/* Remove border on the last section */

.pkn-section:last-child {
    border-bottom: none;
}

/* Alternating background color shift */

.pkn-section--alt {
    margin-left: auto;
    margin-right: auto;
    padding-left: 30px;
    padding-right: 30px;
}

/* Reverse order for alternating layout */

.pkn-section.pkn-section--reverse {
    flex-direction: row-reverse;
}

/* ============================================
   IMAGE CONTAINER (Card-style)
   ============================================ */

.pkn-section-img {
    flex: 0 0 45%;
    min-width: 0;
}

.pkn-section-img img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border: 1px solid var(--tan-border);
    border-radius: 3px;
}

/* Image label area below the image */

.pkn-section-img-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 2px 0;
}

.pkn-img-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 13px;
    color: var(--brown-dark);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Shop Now link with subtle arrow */

.pkn-shop-link,
.pkn-shop-link:link,
.pkn-shop-link:visited {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 12px;
    color: var(--brown-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
}

.pkn-shop-link:hover {
    color: var(--orange-brand);
}

/* Thin right arrow (Bread Alone inspired) */

.pkn-shop-link::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 1px;
    background-color: var(--brown-dark);
    position: relative;
    transition: background-color 0.2s ease, width 0.2s ease;
}

.pkn-shop-link:hover::after {
    background-color: var(--orange-brand);
    width: 18px;
}

/* ============================================
   TEXT CONTAINER
   ============================================ */

.pkn-section-text {
    flex: 0 0 45%;
    min-width: 0;
    padding-top: 5px;
}

.pkn-section-text h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 28px;
    color: var(--brown-dark);
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.pkn-section-text p {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 16px;
    color: var(--brown-dark);
    line-height: 1.6;
    margin: 0;
    max-width: 400px;
}

/* LINK STYLING WITHIN SECTIONS */

.pkn-section-text a,
.pkn-section-text a:link,
.pkn-section-text a:visited {
    color: var(--brown-dark);
}

.pkn-section-text a:hover {
    color: var(--orange-brand);
}

/* ============================================
   RESET OLD em_styles.css ID-BASED OVERRIDES
   (These IDs are reused; old width/height/padding must be neutralized)
   ============================================ */

.pkn-bottom-cards-wrapper #tipcase,
.pkn-bottom-cards-wrapper #signcase {
    width: auto;
    height: auto;
    margin-right: 0;
    margin-top: 0;
    float: none;
    background-image: none;
}

.pkn-bottom-cards-wrapper #tipcase #tipheader,
.pkn-bottom-cards-wrapper #signcase #signheader {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    margin-top: 0;
}

.pkn-bottom-cards-wrapper #tipcase p:first-of-type,
.pkn-bottom-cards-wrapper #signcase p:first-of-type {
    margin-top: 0;
}

.pkn-bottom-cards-wrapper #signcase input {
    width: auto;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
}

/* Override old em_styles #news-submit-txtbtn styles (higher specificity) */

.pkn-card-newsletter #news-submit-txtbtn {
    text-align: right;
    font-size: 12px;
    font-weight: 400;
}

.pkn-card-newsletter #news-submit-txtbtn.submit:hover {
    color: var(--orange-brand);
}

/* ============================================
   TIPCASE (Inline Promo Band under Intro)
   - Outer band spans full width (cream background)
   - Inner content constrained to 1100px like the other sections
   ============================================ */

.pkn-tipcase-band {
    width: 100%;
    background-color: var(--cream-bg);
    border-top: 1px solid var(--tan-border);
    border-bottom: 1px solid var(--tan-border);
}

.pkn-tipcase-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 14px 30px;
    width: 540px;
}

.pkn-tipcase {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    min-height: 104px;
}

.pkn-tipcase--inline {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    gap: 14px;
    min-height: 104px;
}

/* New Block: Governs the grouped elements */
.pkn-tipcase--inline .pkn-dual__content-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.pkn-tipcase--inline .pkn-tipcase__left {
    flex-shrink: 0;
}

.pkn-tipcase--inline .pkn-tipcase__content {
    flex: 1 1 auto;
    min-width: 0;
}

.pkn-tipcase--inline .pkn-tipcase__actions {
    align-self: flex-end;
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.pkn-tipcase__kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.pkn-tipcase__tag {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 8px;
    border: 1px solid var(--tan-border);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--brown-accent);
    background: var(--brown-tint);
}

.pkn-tipcase__meta {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 300;
    color: var(--tan-muted);
}

.pkn-tipcase__cover img {
    display: block;
    width: 100%;
    max-width: 145px;
    height: 147px;
    object-fit: cover;
    border: 1px solid var(--tan-border);
    border-radius: 2px;
}

.pkn-tipcase .pkn-card-header {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 13px;
    color: var(--brown-accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 15px 0;
    line-height: 1.5;
}

.pkn-tipcase .pkn-card-header a,
.pkn-tipcase .pkn-card-header a:link,
.pkn-tipcase .pkn-card-header a:visited {
    color: var(--brown-accent);
    text-decoration: none;
}

.pkn-tipcase .pkn-card-header a:hover {
    color: var(--orange-brand);
}

.pkn-tipcase__blurb {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 14px;
    color: var(--brown-dark);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pkn-tipcase__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    white-space: nowrap;
}

.pkn-tipcase__secondary {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 13px;
    color: var(--brown-dark);
    text-decoration: none;
    border-bottom: 1px solid var(--brown-dark-alpha);
    padding-bottom: 1px;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.pkn-tipcase__secondary:hover {
    color: var(--orange-brand);
    border-color: var(--orange-brand-alpha);
}

/* "Read more" link (shared) */

.pkn-card-readmore,
.pkn-card-readmore:link,
.pkn-card-readmore:visited {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 12px;
    color: var(--brown-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
}

.pkn-card-readmore:hover {
    color: var(--orange-brand);
}

.pkn-card-readmore::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 1px;
    background-color: var(--brown-dark);
    position: relative;
    transition: background-color 0.2s ease, width 0.2s ease;
}

.pkn-card-readmore:hover::after {
    background-color: var(--orange-brand);
    width: 18px;
}

/* ============================================
   BOTTOM SIGNCASE (Full-width, 1100px max)
   ============================================ */

.pkn-bottom-cards-wrapper {
    max-width: 1100px;
    margin: 18px auto 40px;
    padding: 0 30px;
}

.pkn-bottom-cards {
    display: block;
}

/* Individual card style (retained) */

.pkn-card {
    background-color: var(--cream-bg);
    border: 1px solid var(--tan-border);
    border-radius: 3px;
    padding: 28px 28px 24px;
}

/* --- SIGNCASE (Newsletter) — Split layout --- */

.pkn-signcase--split {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 26px;
    align-items: center;
}

.pkn-signcase .pkn-card-header {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 13px;
    color: var(--green-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 8px 0;
    text-align: left;
}

.pkn-signcase .pkn-card-desc {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 14px;
    color: var(--brown-dark);
    line-height: 1.6;
    margin: 0;
    text-align: left;
}

.pkn-signcase__benefits {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    color: var(--tan-muted);
    font-size: 13px;
    font-weight: 300;
    font-family: var(--font-display);
}

.pkn-signcase__benefits li {
    padding-left: 12px;
    position: relative;
}

.pkn-signcase__benefits li::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--green-muted-alpha);
    position: absolute;
    left: 0;
    top: 8px;
}

.pkn-signcase__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pkn-signcase__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.pkn-signcase .pkn-input-group {
    margin: 0;
}

.pkn-signcase .pkn-input-group input {
    width: 100%;
    padding: 8px 10px;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 14px;
    color: var(--brown-dark);
    background-color: var(--white);
    border: 1px solid var(--tan-input-border);
    border-radius: 2px;
    outline: none;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.pkn-signcase .pkn-input-group input::placeholder {
    color: var(--tan-muted);
}

.pkn-signcase .pkn-input-group input:focus {
    border-color: var(--orange-brand);
}

.pkn-signcase__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
}

.pkn-signcase__fineprint {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 300;
    color: var(--tan-muted);
    line-height: 1.4;
}

.pkn-signcase .pkn-submit-btn {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 12px;
    color: var(--brown-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
}

.pkn-signcase .pkn-submit-btn:hover {
    color: var(--orange-brand);
}

.pkn-signcase .pkn-submit-btn::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 1px;
    background-color: var(--brown-dark);
    position: relative;
    transition: background-color 0.2s ease, width 0.2s ease;
}

.pkn-signcase .pkn-submit-btn:hover::after {
    background-color: var(--orange-brand);
    width: 18px;
}

/* ============================================
   TABLET RESPONSIVE (max-width: 1024px)
   ============================================ */

@media (max-width: 1024px) {
    .pkn-intro-wrapper {
        padding: 30px 20px 25px;
    }

    .pkn-intro-wrapper h1 {
        font-size: 40px;
    }

    .pkn-intro-wrapper p {
        font-size: 16px;
    }

    .pkn-section {
        gap: 30px;
        padding: 35px 30px;
    }

    .pkn-section-img,
    .pkn-section-text {
        flex: 0 0 48%;
    }

    .pkn-bottom-cards {
        gap: 20px;
    }

    .pkn-card {
        padding: 22px 22px 20px;
    }

}

/* ============================================
   TABLET/MOBILE (max-width: 768px)
   ============================================ */

/* ============================================
   SMALL MOBILE (max-width: 480px)
   ============================================ */

@media (max-width: 480px) {
    body.index {
        font-size: 14px;
    }

    .pkn-intro-wrapper {
        padding: 20px 12px 16px;
    }

    .pkn-intro-wrapper h1 {
        font-size: 26px;
        margin-bottom: 12px;
    }

    .pkn-intro-wrapper p {
        font-size: 14px;
        line-height: 1.5;
    }

    .pkn-intro-rule {
        width: 60px;
        margin-top: 18px;
    }

    .pkn-section {
        padding: 28px 30px;
        gap: 15px;
    }

    .pkn-section-text h2 {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .pkn-section-text p {
        font-size: 14px;
    }

    .pkn-section-img-label {
        padding-top: 8px;
    }

    .pkn-img-title {
        font-size: 12px;
    }

    .pkn-shop-link {
        font-size: 11px;
    }

    .pkn-bottom-cards-wrapper {
        padding: 0 12px;
        margin-bottom: 30px;
    }

    .pkn-card {
        padding: 18px 16px 16px;
    }

    .pkn-card-feature .pkn-card-header {
        font-size: 12px;
    }

    .pkn-card-feature .pkn-card-body {
        gap: 12px;
    }

    .pkn-card-feature .pkn-card-body img {
        width: 80px;
    }

    .pkn-card-feature .pkn-card-body-text {
        font-size: 13px;
    }

    .pkn-card-newsletter .pkn-card-header {
        font-size: 12px;
    }

    .pkn-card-newsletter .pkn-card-desc {
        font-size: 13px;
    }

    .pkn-card-newsletter .pkn-input-group input {
        font-size: 13px;
        padding: 7px 9px;
    }

}

/* ============================================================
   DUAL TIPCASE BAND  (.pkn-tipcase-band--dual)
   All rules below are scoped to this modifier class so the
   single-panel version of .pkn-tipcase-band is unaffected.
   ============================================================ */

/* --- Outer band: override inner width / layout --- */

.pkn-tipcase-band--dual .pkn-tipcase-inner {
    width: auto;
    max-width: 1100px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 0;
    gap: 0;
}

/* --- Book panel (left, 55%) --- */

.pkn-dual__book {
    flex: 50 0 0%;
    min-width: 0;
    padding: 14px 22px 14px 30px;
    display: flex;
    align-items: stretch;
}

.pkn-dual__book .pkn-tipcase--inline {
    width: 100%;
}

/* --- Vertical divider --- */

.pkn-dual__divider {
    width: 1px;
    background-color: var(--tan-border);
    align-self: stretch;
    margin: 10px 0;
    flex-shrink: 0;
}

/* --- Faire panel (right, 45%) --- */

.pkn-dual__faire {
    flex: 50 0 0%;
    min-width: 0;
    padding: 14px 30px 14px 22px;
    display: flex;
    align-items: stretch;
}

/* --- Faire inner layout --- */

.pkn-faire-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 9px;
}

/* --- Kicker row: logo + rule + sub-label --- */

.pkn-faire__kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.pkn-faire__logo {
    height: 11px;
    width: auto;
    display: block;
    opacity: 0.72;
    flex-shrink: 0;
}

.pkn-faire__rule {
    display: inline-block;
    width: 1px;
    height: 12px;
    background-color: var(--tan-rule);
    flex-shrink: 0;
}

.pkn-faire__sub {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 300;
    color: var(--tan-muted);
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* --- Body: product image + text side by side --- */

.pkn-faire__body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.pkn-faire__product {
    flex-shrink: 0;
}

.pkn-faire__product img {
    display: block;
    width: 100%;
    max-width: 145px;
    height: 147px;
    object-fit: cover;
    border: 1px solid var(--tan-border);
    border-radius: 2px;
}

.pkn-faire__text {
    flex: 1 1 auto;
    min-width: 0;
}

.pkn-faire__heading {
    color: var(--brown-accent);
    margin-bottom: 15px;
}

.pkn-faire__blurb {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 13px;
    color: var(--gray-warm);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- CTA row --- */

.pkn-faire__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
}

/* Faire CTA inherits .pkn-card-readmore styles;
   only the hover line color is overridden to Faire green */

.pkn-faire__cta:hover {
    color: var(--brown-accent);
}

.pkn-faire__cta:hover::after {
    background-color: #1a5e4a;
    width: 18px;
}

/* ============================================================
   DUAL BAND — RESPONSIVE
   ============================================================ */

/* Tablet: tighten horizontal padding */

@media (max-width: 1024px) {
    .pkn-dual__book {
        padding: 14px 16px 14px 20px;
    }

    .pkn-dual__faire {
        padding: 14px 20px 14px 16px;
    }

    .pkn-faire__blurb {
        font-size: 12px;
    }
}

/* Mobile: stack panels vertically, divider becomes horizontal */

@media (max-width: 768px) {
    .pkn-tipcase-band--dual .pkn-tipcase-inner {
        flex-direction: column;
    }

    .pkn-dual__book {
        flex: none;
        padding: 14px 20px;
        width: 100%;
        box-sizing: border-box;
    }

    .pkn-dual__divider {
        width: auto;
        height: 1px;
        margin: 0 20px;
        align-self: auto;
    }

    .pkn-dual__faire {
        flex: none;
        padding: 14px 20px;
        width: 100%;
        box-sizing: border-box;
    }

}

@media (max-width: 480px) {
    .pkn-dual__book,
    .pkn-dual__faire {
        padding: 12px 14px;
    }

    .pkn-dual__divider {
        margin: 0 14px;
    }

    .pkn-faire__product img {
        width: 58px;
    }

    .pkn-faire__blurb {
        font-size: 12px;
    }
}


/* ============================================================
   EVENTS & CLASSES — REDESIGNED CARD LAYOUT
   Append this block to em_styles.css
   ============================================================ */

/* ── Side Navigation Enhancement ─────────────────────── */

.ec-sidenav {
    margin-top: 12px;
}

.ec-sidenav .categoryListHeader h1 {
    font-family: var(--font-nav-2);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--tan-muted);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--tan-border);
}

.ec-sidenav ul {
    margin: 0;
    padding: 0;
}

.ec-sidenav li {
    list-style: none;
    margin-bottom: 2px;
}

.ec-sidenav li a {
    display: block;
    font-family: var(--font-nav-2);
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: var(--brown-dark) !important;
    padding: 7px 10px 7px 12px;
    border-left: 3px solid transparent;
    transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
    text-decoration: none;
}

.ec-sidenav li a:hover {
    color: var(--orange-brand) !important;
    border-left-color: var(--tan-border);
    background-color: var(--cream-bg);
}

.ec-sidenav li.isSelected a {
    color: var(--orange-brand) !important;
    border-left-color: var(--orange-brand);
    background-color: var(--brown-tint);
    font-weight: 400;
}

/* ── Disclaimer Banner ───────────────────────────────── */

.ec-disclaimer {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--brown-dark);
    background-color: var(--cream-bg);
    border: 1px solid var(--tan-border);
    border-left: 3px solid var(--red-disclaimer);
    padding: 9px 14px;
    margin-bottom: 18px;
    line-height: 1.5;
}

.ec-disclaimer__label {
    font-weight: 700;
    color: var(--red-disclaimer);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.8px;
    margin-right: 4px;
}

.ec-disclaimer a,
.ec-disclaimer a:link,
.ec-disclaimer a:visited {
    color: var(--brown-dark);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ec-disclaimer a:hover {
    color: var(--orange-brand);
}

/* ── Card Grid Container ─────────────────────────────── */

.ec-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Card — Base ─────────────────────────────────────── */

.ec-card {
    background-color: var(--white);
    border: 1px solid var(--tan-border);
    margin-bottom: 22px;
    box-shadow: 0 2px 8px rgba(69, 37, 8, 0.07);
    transition: box-shadow 0.2s ease;
}

.ec-card:hover {
    box-shadow: 0 4px 16px rgba(69, 37, 8, 0.13);
}

/* ── Date Header Bar ─────────────────────────────────── */

.ec-card__date-bar {
    background-color: var(--blue-event);
    color: var(--white);
    font-family: var(--font-nav-2);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    padding: 7px 16px;
    line-height: 1;
}

.ec-card__date-bar--classes,
.ec-card__date-bar--class {
    background-color: var(--green-class);
}

.ec-card__date-bar--events,
.ec-card__date-bar--event {
    background-color: var(--blue-event);
}

.ec-card__date-bar--events-and-classes {
    background-color: var(--blue-event);
}

/* ── Card Body: Image + Content ──────────────────────── */

.ec-card__body {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

/* ── Image Column ────────────────────────────────────── */

.ec-card__image-col {
    flex: 0 0 255px;
    width: 255px;
    min-height: 280px;
    overflow: hidden;
    position: relative;
}

.ec-card__image {
    display: block;
    width: 100%;
    height: auto;
    min-height: 280px;
    object-fit: cover;
    object-position: center top;
}

/* ── Content Column ──────────────────────────────────── */

.ec-card__content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 16px 20px 0 20px;
    min-width: 0;
}

/* ── Title ───────────────────────────────────────────── */

.ec-card__title {
    font-family: var(--font-nav-2);
    font-size: 17px;
    font-weight: 400;
    color: var(--brown-dark);
    line-height: 1.3;
    margin: 0 0 14px 0;
    padding: 0;
}

/* ── Meta Info (time / location / directions) ────────── */

.ec-card__meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 14px;
}

.ec-card__meta-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    color: var(--gray-text);
    line-height: 1.4;
}

/* Hide empty meta items */
.ec-card__meta-item--location .ec-card__meta-value:empty,
.ec-card__meta-item--directions .ec-card__meta-value:empty {
    display: none;
}

.ec-card__meta-item--location:has(.ec-card__meta-value:empty),
.ec-card__meta-item--directions:has(.ec-card__meta-value:empty) {
    display: none;
}

.ec-card__meta-label {
    flex: 0 0 68px;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--tan-muted);
    padding-top: 2px;
}

.ec-card__meta-value {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--brown-dark);
    font-weight: 500;
}

.ec-card__meta-item--directions .ec-card__meta-value a,
.ec-card__meta-item--directions .ec-card__meta-value a:link,
.ec-card__meta-item--directions .ec-card__meta-value a:visited {
    color: var(--orange-archive);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ec-card__meta-item--directions .ec-card__meta-value a:hover {
    color: var(--orange-hover);
}

/* ── Divider ─────────────────────────────────────────── */

.ec-card__divider {
    height: 1px;
    background-color: var(--tan-border);
    margin-bottom: 12px;
}

/* ── Collapsible Description ─────────────────────────── */

.ec-card__desc {
    position: relative;
    flex: 1 1 auto;
    margin-bottom: 12px;
}

.ec-card__desc-inner {
    max-height: 88px; /* ~5 lines at 13px/1.35 lh */
    overflow: hidden;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--gray-text);
    line-height: 1.45;
    transition: max-height 0.3s ease;
}

/* Strip top margin from first paragraph in descriptions */
.ec-card__desc-inner > p:first-child {
    margin-top: 0;
}

.ec-card__desc-inner > p:last-child {
    margin-bottom: 0;
}

.ec-card__desc-fade {
    position: absolute;
    bottom: 22px; /* height of toggle */
    left: 0;
    right: 0;
    height: 36px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.ec-card__desc--expanded .ec-card__desc-inner {
    max-height: 1200px; /* generous max for expanded */
}

.ec-card__desc--expanded .ec-card__desc-fade {
    opacity: 0;
}

.ec-card__desc--no-overflow .ec-card__desc-fade {
    display: none;
}

.ec-card__desc-toggle {
    display: block;
    background: none;
    border: none;
    padding: 3px 0;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--orange-brand);
    cursor: pointer;
    text-transform: uppercase;
    transition: color 0.18s ease;
}

.ec-card__desc-toggle:hover {
    color: var(--orange-hover);
}

/* ── Price + Action Footer ───────────────────────────── */

.ec-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--tan-border);
    padding: 12px 0 14px 0;
    margin-top: auto;
    gap: 12px;
}

.ec-card__price {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ec-card__price-amount {
    font-family: var(--font-nav-2);
    font-size: 26px;
    font-weight: 400;
    color: var(--brown-dark);
    line-height: 1;
    letter-spacing: -0.5px;
}

/* Free events: show FREE label */
.ec-card__price-amount[data-free="true"] {
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--green-class);
}

/* ── Reserve/Join Button ─────────────────────────────── */

.ec-card__action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--orange-brand);
    color: var(--white);
    border: none;
    font-family: var(--font-nav-2);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 11px 22px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.ec-card__action:hover {
    background-color: var(--orange-hover);
    transform: translateY(-1px);
}

.ec-card__action:active {
    transform: translateY(0);
    background-color: var(--brown-accent);
}

.ec-card__action-arrow {
    font-size: 15px;
    transition: transform 0.2s ease;
    display: inline-block;
}

.ec-card__action:hover .ec-card__action-arrow {
    transform: translateX(3px);
}

/* ── Reserved Button State ───────────────────────────────── */
.ec-card__action--reserved {
    background-color: var(--green-class) !important;
    border-color: var(--green-class) !important;
    color: #fff !important;
    cursor: default;
    pointer-events: none; /* Prevent additional clicks */
}

/* ── Footer Callout (Enrollment Note) ────────────────── */

.ec-footer-callout {
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background-color: var(--cream-bg);
    border: 1px solid var(--tan-border);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--gray-text);
    line-height: 1.5;
}

.ec-footer-callout__phone {
    display: inline-block;
    font-weight: 700;
    color: var(--red-phone);
    font-size: 15px;
    margin-left: 6px;
}

/* ── Responsive ──────────────────────────────────────── */

@media (max-width: 1024px) {
    .event-class-container {
        width: auto;
        flex: 1 1 auto;
    }

    .category-navigation-container {
        width: 160px;
        flex-shrink: 0;
    }
}

@media (max-width: 800px) {
    .eventcontainer.flexbox {
        flex-direction: column;
    }

    .category-navigation-container {
        width: 100% !important;
    }

    .ec-sidenav ul {
        display: flex;
        gap: 10px;
    }

    .ec-sidenav li a {
        border-left: none;
        border-bottom: 3px solid transparent;
        padding: 6px 14px;
    }

    .ec-sidenav li.isSelected a {
        border-left: none;
        border-bottom-color: var(--orange-brand);
    }

    .event-class-container {
        width: 100% !important;
    }

    .ec-card__image-col {
        flex: 0 0 200px;
        width: 200px;
    }
}

@media (max-width: 600px) {
    .ec-card__body {
        flex-direction: column;
    }

    .ec-card__image-col {
        flex: none;
        width: 100%;
        height: 220px;
        min-height: 220px;
    }

    .ec-card__image {
        min-height: 220px;
    }

    .ec-card__content {
        padding: 14px 14px 0 14px;
    }

    .ec-card__price-amount {
        font-size: 22px;
    }

    .ec-card__action {
        padding: 10px 16px;
        font-size: 11px;
    }

    .ec-card__footer {
        flex-wrap: wrap;
    }
}

/* Edge-to-Edge Section Styles */
.pkn-edge-section {
    display: grid;
    grid-template-columns: 1fr minmax(auto, 510px) minmax(auto, 510px) 1fr;
    background-color: #ffffff;
}
.pkn-edge-section--alt {
    background-color: #faf7f3;
}
.pkn-edge-text {
    grid-column: 2 / 3;
    padding: 80px 40px 80px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}
.pkn-edge-section--reverse .pkn-edge-text {
    grid-column: 3 / 4;
    padding: 80px 20px 80px 40px;
}
.pkn-edge-image {
    grid-column: 3 / 5;
    background-size: cover;
    background-position: center;
    min-height: 450px;
}
.pkn-edge-section--reverse .pkn-edge-image {
    grid-column: 1 / 3;
}
.pkn-edge-text h2 {
    font-family: 'Brother-1816', Helvetica, Arial, serif;
    font-weight: 300;
    font-size: 28px;
    color: #452508;
    margin: 0 0 12px 0;
    line-height: 1.4;
}
.pkn-edge-text p {
    font-family: 'Brother-1816', Helvetica, Arial, serif;
    font-weight: 300;
    font-size: 16px;
    color: #452508;
    line-height: 1.6;
    margin: 0 0 20px 0;
}
@media (max-width: 768px) {
  .pkn-tipcase-band {
    background-color: var(--white);
  }
  .pkn-dual__book,
  .pkn-dual__faire  {
    background-color: var(--cream-bg);
  }
   .pkn-dual__divider {
    margin: 9px 20px;
  }
}

@media (max-width: 1024px) {
    .pkn-sections-container {
        margin-top: 45px;
    }
    .pkn-edge-section {
        display: flex;
        flex-direction: column-reverse;
    }
    .pkn-edge-section--reverse {
        flex-direction: column;
    }
    .pkn-edge-text, .pkn-edge-section--reverse .pkn-edge-text {
        padding: 40px 30px;
    }
    .pkn-edge-image, .pkn-edge-section--reverse .pkn-edge-image {
        min-height: 350px;
        width: 100%;
    }
}


/* ═══════════════════════════════════════════════════════════
   EVENTS & RESERVATIONS
   ═══════════════════════════════════════════════════════════ */

/* ── Sold Out / Unavailable Card State ────────────────────── */

.ec-card--unavailable .ec-card__date-bar,
.ec-card__date-bar--inactive {
    background-color: #909090;
}

.ec-card__sold-out-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(40, 30, 20, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.ec-card__sold-out-label {
    font-family: var(--font-nav-2);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--white);
    padding: 5px 12px;
    border: 1px solid rgba(255,255,255,0.6);
}

/* Hide toggle and fade for unavailable cards */
.ec-card--unavailable .ec-card__desc-toggle,
.ec-card--unavailable .ec-card__desc-fade {
    display: none;
}

/* Sold out notice replacing button */
.ec-card__sold-out-notice {
    font-family: var(--font-nav-2);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gray-disabled, #999);
    padding: 11px 0;
}

/* Waitlist button variant */
.ec-card__action--waitlist {
    background-color: transparent;
    color: var(--orange-brand, #AE902C);
    border: 1px solid var(--orange-brand, #AE902C);
}
.ec-card__action--waitlist:hover {
    background-color: var(--orange-brand, #AE902C);
    color: var(--white, #fff);
}

/* Reserved state */
.ec-card__action--reserved {
    background-color: #4CAF50;
    color: #fff;
    cursor: default;
    border: none;
}

/* ── Hold Timer Banner ────────────────────────────────────── */

.iluvana-hold-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    transform: translateY(0);
    transition: transform 0.3s ease;
}
.iluvana-hold-banner--hidden {
    transform: translateY(100%);
    pointer-events: none;
}
.iluvana-hold-banner__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    text-align: center;
}
.iluvana-hold-banner--active .iluvana-hold-banner__inner {
    background-color: #333;
    color: #fff;
}
.iluvana-hold-banner--warning .iluvana-hold-banner__inner {
    background-color: #e65100;
    color: #fff;
}
.iluvana-hold-banner--expired .iluvana-hold-banner__inner {
    background-color: #b71c1c;
    color: #fff;
}
.iluvana-hold-banner__timer {
    font-weight: bold;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

/* ── Expired Reservation Notice ───────────────────────────── */

.iluvana-expired-notice {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 8500;
    max-width: 380px;
    transform: translateX(120%);
    transition: transform 0.3s ease;
}
.iluvana-expired-notice--visible {
    transform: translateX(0);
}
.iluvana-expired-notice__inner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #e0d8cc;
    border-left: 4px solid #AE902C;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 3px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #564c3e;
    line-height: 1.5;
}
.iluvana-expired-notice__icon {
    font-size: 18px;
    flex-shrink: 0;
}
.iluvana-expired-notice__close {
    background: none;
    border: none;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    flex-shrink: 0;
}

/* ── Cart Section Labels ──────────────────────────────────── */

.cart-section-label {
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    padding: 12px 0 6px;
    border-bottom: 1px solid #e0d8cc;
    margin-bottom: 8px;
}

/* Calendar icon placeholder for reservation cart items */
.cart-review-calendar-icon {
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── CMS Event Details Panel ──────────────────────────────── */

.event-details-panel {
    background: #faf8f4;
    border-top: 1px solid #e0d8cc;
    border-bottom: 1px solid #e0d8cc;
    padding: 14px 20px;
}
.event-details-panel__row {
    display: flex;
    gap: 16px;
    margin-bottom: 10px;
}
.event-details-panel__row:last-child {
    margin-bottom: 0;
}
.event-details-panel__field {
    flex: 1;
    min-width: 0;
}
.event-details-panel__field--short {
    flex: 0 0 140px;
}
.event-details-panel__field label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin-bottom: 4px;
}
.event-details-panel__field input,
.event-details-panel__field select {
    width: 100%;
    padding: 6px 8px;
    font-size: 13px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #fff;
    box-sizing: border-box;
}
.event-details-panel__hint {
    display: block;
    font-size: 10px;
    color: #aaa;
    margin-top: 2px;
}

.ec-card__action-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Override #contentbox link colors for this specific button */
#contentbox a.ec-card__action--external,
#contentbox a.ec-card__action--external:link,
#contentbox a.ec-card__action--external:visited {
    background-color: var(--blue-event);
    color: var(--white);
    text-decoration: none;
    display: inline-flex;
    justify-content: center;
}

#contentbox a.ec-card__action--external:hover {
    background-color: #1a425c;
    color: var(--white);
}

.ec-card__external-label {
    font-size: 11px;
    color: var(--gray-text);
    margin-top: 6px;
    text-align: right;
    font-style: italic;
}
.ec-card__meta-item--seats {
    margin-top: 8px;
    border-top: 1px dotted #e0d8cc;
    padding-top: 8px;
}
.ec-card__meta-value--seats-left {
    color: var(--red-phone);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9em;
}