#apicius { padding: 20px 0px; position: relative; }
#apicius, #apicius * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-font-smoothing: antialiased; }
#apicius .recipe-tile, #apicius .product-tile, #apicius .related-post-tile { margin-bottom: 100px; padding: 0 15px; }

/* the inside container of a ratio-stretched div */
#apicius .stretched-interior { display: block; position: absolute; top: 0; right: 15px; bottom: 0; left: 15px; background-position: center center; background-size: cover; background-repeat: no-repeat; }
#apicius .stretcher { position: relative; }
#recipes_list .stretcher, #products_list .stretcher, #apicius_related_things_below .stretcher { padding-top: 73%; }
#recipes_list a, #recipes_list a:hover, #recipes_list a:active, #recipes_list a:focus, #products_list a, #products_list a:hover, #products_list a:active, #products_list a:focus { outline: 0; box-shadow: none; color: inherit; }
#recipes_list .recipe-title, #products_list .product-title, #apicius_related_things_below .apicius-related-item-name { background-color: white; border: 1px solid black; width: 100%; display: block; padding: 8px; position: absolute; left: 0; bottom: -70px; min-height: 70px; }

/********* filtering */
#recipes_filters, #products_filters { margin-bottom: 30px; }
#recipes_list .type-tile, #products_list .type-tile, #recipe_type_tile_all_header, #recipe_type_show_all { position: relative; float: left; width: 100%; font-size: 10px; line-height: 20px; height: auto; border: 1px solid grey; margin-bottom: 10px; cursor: pointer; padding-left: 22px; }
#recipes_list .type-tile:before, #products_list .type-tile:before { content: "\2605"; /* ★ */ position: absolute; left: 6px; top: 1px; }
#recipes_list .type-tile.off:before, #products_list .type-tile.off:before { content: ""; }
#recipe_type_tiles { display: none; overflow: hidden; z-index: 9001;  /*opacity: 0;*/ -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: scale(0.75) translateY(-21px); -ms-transform: scale(0.75) translateY(-21px); transform: scale(0.75) translateY(-21px); -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; }
#recipe_types.open #recipe_type_tiles { opacity: 1; pointer-events: auto; -webkit-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); transform: scale(1) translateY(0); }
#recipe_type_tile_all_header { padding-left: 30px !important; }

/* caret */
#recipe_types #recipe_type_tile_all_header::after { content: ''; display: block; pointer-events: none; position: absolute; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out;  /*width: 5px;*/ width: 0; height: 0; border-style: solid; border-width: 7.5px 0 7.5px 7px; border-color: transparent transparent transparent #999; left: 8px; top: 50%; margin-top: -7px; }
#recipe_types.open #recipe_type_tile_all_header::after { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }
#recipes_list .filter-dropdown, #recipe_type_tile_all_header { width: 100%; border: 1px solid grey; font-size: 14px; -webkit-appearance: none; -webkit-border-radius: 0px; padding: 10px; background-color: #f4f4f4; background-image: url("data:image/svg+xml;utf8,<svg version=!string!xmlns=!string!xmlns:xlink=!string!width=!string!height=!string!viewBox=!string!><path fill=!string!d=!string!></path></svg>"); background-position: 100% 50%; background-repeat: no-repeat; }

/************ pagination */
.recipes_pagination, .products_pagination { margin-bottom: 12px; }
.isotope-recipe-pager .pager, .isotope-product-pager .pager { padding: 3px 5px; margin-right: 8px; background-color: #ccc; display: inline-block; cursor: pointer; }
.isotope-recipe-pager .pager.current, .isotope-recipe-pager .pager:hover, .isotope-product-pager .pager.current, .isotope-product-pager .pager:hover { background-color: darkorange; }
.isotope-recipe-pager .pager.collapse, .isotope-product-pager .pager.collapse { display: none;  /*border: 2px solid hotpink;*/ }
.apicius-ellipsis { margin-right: 8px; }
.recipe_pager_prev_arrow, .recipe_pager_next_arrow, .product_pager_prev_arrow, .product_pager_next_arrow { width: 0; height: 0; border-style: solid; background-color: transparent; display: inline-block; }
.recipe_pager_prev_arrow, .product_pager_prev_arrow { border-width: 6px 8px 6px 0; border-color: transparent #ccc transparent transparent; margin-right: 8px; }
.recipe_pager_prev_arrow.active, .product_pager_prev_arrow.active { border-color: transparent #999 transparent transparent; cursor: pointer; }
.recipe_pager_prev_arrow.active:hover, .product_pager_prev_arrow.active:hover { border-color: transparent darkorange transparent transparent; }
.recipe_pager_next_arrow, .product_pager_next_arrow { border-width: 6px 0 6px 8px; border-color: transparent transparent transparent #ccc; }
.recipe_pager_next_arrow.active, .product_pager_next_arrow.active { border-color: transparent transparent transparent #999; cursor: pointer; }
.recipe_pager_next_arrow.active:hover, .product_pager_next_arrow.active:hover { border-color: transparent transparent transparent darkorange; }

/* compensating for usage of nice-select */
#recipes_list .filter-dropdown.nice-select { padding: 0px 30px 0px 28px; background-image: none; }
@media print {
  #apicius .printhide { display: none !important; margin: 0; }
}
#view_all { width: 100%; height: auto; border: 1px solid grey; margin-bottom: 10px; cursor: pointer; text-align: center; margin-top: 10px; background-color: var(--ast-global-color-0) !important; font-size: 19px; -webkit-appearance: none; -webkit-border-radius: 0px; padding: 11px; max-width: 150px; color: #fff !important; font-family: 'adelle-sans'; font-weight: 600; }
#recipes_filters .col-sm-6.col-md-1.text-nowrap { max-width: 190px; display: flex; justify-content: flex-end; }

/* single recipe view */

/* remove any theme's default single post featured image that comes before >content< */

body.single-recipe .post-thumbnail, body.single-recipe .wp-post-image, body.single-recipe .post-image img, body.single-recipe .entry_title, body.single-recipe .entry-date, body.single-recipe .post_info { display: none !important; margin: 0 !important; }
.recipe-share { padding-top: 10px; }
#apicius #single_recipe_share { margin-bottom: 20px; }
#apicius #single_recipe_share img { max-width: 35px; position: relative; float: left; margin-right: 8px; margin-bottom: 10px; }
#apicius .products-used { margin-top: 20px; }
#recipes_list.related-recipes { margin-top: 20px; }
#apicius .rec-product { text-align: center; position: relative; float: left; margin: 20px 20px 20px 0; }
#apicius .rec-product img { max-width: 150px; }
#apicius .rec-product .buy-now { padding: 1px 7px; border: 1px solid #ccc; margin-top: 1px; display: inline-block; }
#apicius .rec-product .rec-product-name.final-pos { width: 100%; position: absolute; left: 0; bottom: 0; }

/* nutritional info box */

/********************************************** nutrition label */
#apicius #specs { position: relative; margin: 15px auto; width: 100%; max-width: 323px; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
#apicius .nutrition-label { width: 100%; border: 1px solid black; float: left; }
#apicius .serving-size { margin-top: 10px; margin-left: 5px; margin-right: 5px; }
#apicius div.amt-per-serving span.nutrition-heading { display: block; float: left; margin-left: 20px; width: 80px; }
#apicius div.amt-per-serving span.amt-per-serving-title { width: 200px; display: block; float: left; }
#apicius .serving-size { border-bottom: 10px solid black; }
#apicius .nutrition-1 { border-bottom: 10px solid black; margin-left: 5px; margin-right: 5px; }
#apicius .nutrition-2 { margin-left: 5px; margin-right: 5px; }
#apicius .nutrition-entry-1 { border-top: 1px solid black; margin-left: 5px; margin-right: 5px; float: left; clear: both; padding: 4px 0; }
#apicius .nutrition-entry-2 { border-top: 1px solid black; margin-left: 10px; margin-right: 5px; float: left; clear: both; padding: 4px 0; }
#apicius .nutrition-entry-3 { border-top: 1px solid black; margin-left: 20px; margin-right: 5px; float: left; clear: both; padding: 4px 0; }
#apicius .nutrition-entry-4 { border-bottom: 1px solid black; margin-left: 5px; margin-right: 5px; float: left; clear: both; padding: 4px 0; }
#apicius .nutrition-entry-4:last-child { border-bottom: 0; }
#apicius .nutrition-entry-1 .title { float: left; display: block; font-weight: bold; width: 200px; }
#apicius .nutrition-entry-2 .title { float: left; display: block; width: 195px; }
#apicius .nutrition-entry-3 .title { float: left; display: block; width: 200px; }
#apicius .nutrition-entry-4 .title { float: left; display: block; font-weight: bold; width: 200px; }
#apicius .nutrition-entry-1 .nutrition-value { display: block; float: left; margin-left: 10px; width: 80px; }
#apicius .nutrition-entry-2 .nutrition-value { display: block; float: left; margin-left: 5px; width: 80px; }
#apicius .nutrition-entry-2 .daily-value { display: inline-block; margin-left: -5px; }
#apicius .nutrition-entry-3 .nutrition-value { display: block; float: left; margin-left: 5px; width: 80px; }
#apicius .nutrition-entry-4 .nutrition-value { display: block; float: left; margin-left: 20px; width: 80px; }
#apicius .amt-per-serving { margin-left: 5px; padding: 4px 0; }
#apicius .grocery-section-header { font-size: 20px; font-weight: bold; }
#apicius .serving-size { float: left; clear: both; width: 95%; }
#apicius div.serving-size div { width: 100%; }
#apicius .amt-per-serving { float: left; clear: both; }
#apicius .calories { float: left; clear: both; margin-left: 5px; margin-right: 5px; border-bottom: 5px solid black; }
#apicius .nutrition-1 { float: left; clear: both; }
#apicius .nutrition-2 .nutrition-entry-1 .title, #apicius .nutrition-2 .nutrition-entry-4 .title, #apicius .daily-measure { font-weight: normal; }
#apicius .serving-size-entry { display: block; margin-left: 5px; float: left; width: 80px; }
#apicius .serving-size-title { font-weight: bold; float: left; width: 200px; }
#apicius .serving-per-container-title { font-weight: bold; float: left; margin: 0px; padding: 0px; width: 200px; }
#apicius .serving-per-container-entry { display: block; margin-left: 15px; float: left; width: 80px; }
#apicius .servings-size, #apicius .servings-per-container { margin: 0px; padding: 0px; }
#apicius .calories, #apicius .nutrition-1, #apicius .nutrition-2, #apicius .nutrition-3, #apicius .nutrition-4, #apicius .nutrition-entry-1, #apicius .nutrition-entry-2, #apicius .nutrition-entry-3, #apicius .nutrition-entry-4 { width: 94%; }
#apicius .serving-size-title, #apicius .nutrition-entry-1 .title, #apicius .nutrition-entry-2 .title, #apicius .nutrition-entry-3 .title, #apicius .nutrition-entry-4 .title { width: 66%; }
#apicius .serving-size-entry, #apicius .nutrition-entry-1 .nutrition-value, #apicius .nutrition-entry-2 .nutrition-value, #apicius .nutrition-entry-3 .nutrition-value, #apicius .nutrition-entry-4 .nutrition-value { width: 25%; }

/********************** product single view */
body.single-product .post-thumbnail, body.single-product .wp-post-image, body.single-product .post-image img, body.single-product .entry_title, body.single-product .entry-date, body.single-product .post_info { display: none !important; margin: 0 !important; }
#apicius #product_content { margin-top: 20px; }
#apicius #single_product_share { margin-bottom: 20px; }
#apicius #single_product_share img { max-width: 35px; position: relative; float: left; margin-right: 8px; margin-bottom: 10px; }
#apicius_after_product_content, #apicius_after_recipe_content { margin-top: 16px; }

/********************** prev/next links */
.apicius_prev_next.above { margin-bottom: 12px; }
.apicius_prev { }
.apicius_next { text-align: right; }
#apicius { float: none; clear: both; width: 100%; max-width: 1500px !important; margin-left: auto !important; margin-right: auto !important; }
#apicius #recipe_tiles { width: 100%; float: none; clear: both; }
#recipe_tiles .recipe-tile { width: 25%; }

/** Old site CCS test */

/*MAIN PRODUCTS*/
.blog_holder.blog_single article { margin-bottom: -10px !important; }
#apicius { max-width: 1500px !important; margin-left: auto !important; margin-right: auto !important; }
#apicius .product-tile, #apicius .recipe-tile { margin-bottom: 10px !important; }
.recipe-tile-btn-view-recipe { display: none !important; }
.products-inner { background-color: #fff5e7; padding: 15px !important; }
.products-inner>a { font-weight: 500; text-decoration: none; text-align: center !important; font-size: 28px !important; }
.products-inner .productnumber { color: #9D4F2B !important; font-size: 18px !important; }
@media (max-width:1200px) {
  .products-inner>a { font-size: 24px !important; }
  .products-inner .productnumber { font-size: 16px !important; }
}
.products-inner>a>div:last-child { margin-top: 10px; min-height: 2em; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.product-tile .products-inner>a>div:last-child { min-height: 2.8em; }
.product-tile, .recipe-tile { width: 25% !important; box-sizing: border-box !important; padding: 15px !important; color: #9b1c23 !important; }
.recipe-tile>p:first-child { display: none !important; }
.square { position: relative; background-color: white; aspect-ratio: 3 / 2; overflow: hidden; }
.square::after { content: '1.1'; display: block; padding-bottom: 100%; }
.square img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; left: 0; background-color: white; }
#products_header, #recipes_header { text-align: center; }
#products_header>.col-xs-12:last-child
#recipes_header>.col-xs-12:last-child, #products_header>div:nth-child(2), #results_count { display: none !important; }
#results_count { font-weight: 500; font-style: normal; text-transform: uppercase; }
.isotope-product-pager, .isotope-recipe-pager { text-align: center; padding: 15px 0; }
.isotope-product-pager .pager, .isotope-recipe-pager .pager { line-height: 15px !important; padding: 7px 10px 3px !important; background: #F3E3AF !important; color: #9B1C23 !important; }
.isotope-product-pager .pager.current, .isotope-product-pager .pager:hover, .isotope-recipe-pager .pager.current, .isotope-recipe-pager .pager:hover { background: #E4A54E !important; }
#products_filters>div { width: 100% !important; }
#products_filters h3 { display: none !important; }
#product_types { display: flex; column-gap: 20px; justify-content: center; flex-wrap: wrap; align-items: center; }
@media screen and (max-width:768px) {
  #product_types { flex-direction: column !important; }
}
#apicius #product_types.clearfix:before { content: 'http://www.w3.org/2000/svg'; position: relative; display: inline-block; font-weight: 500; font-style: normal; text-transform: uppercase; color: #9D4F2B !important; font-size: 16px; margin-top: -7px; }
@media screen and (max-width:1200px) {
  #apicius #product_types.clearfix:before { display: block !important; width: 100%; text-align: center; }
}

/* make the product types sub menu on page look like the filtering type tiles */
ul#product_types { list-style: none; }
ul#product_types li { position: relative; float: left; width: 100%; font-size: 10px; line-height: 20px; height: auto; margin-bottom: 10px; cursor: pointer; padding-left: 22px; background-color: #e4a54e; }
ul#product_types li a { color: #9d4f2b; text-decoration: none; }
ul#product_types li:hover a, ul#product_types li.current-menu-item a { color: #F3E3AF !important; }
#product_types .type-tile, ul#product_types li { padding: 5px 5px !important; max-width: 150px; float: none !important; text-align: center !important; font-weight: 700; font-style: normal; font-size: 14px !important; text-transform: uppercase; }
#product_types .type-tile:hover, ul#product_types li:hover { background: #A12322 !important; color: #F3E3AF !important; }
.type-tile:before { content: none !important; display: none !important; }
#product_types .type-tile:not(.off), ul#product_types li.current-menu-item { color: #F3E3AF !important; background: #9B1C23 !important; border-color: #9B1C23 !important; }

/* recipe filtering */

/* Recipe Filtering — Modern Restyle */


#recipes_filters { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; align-items: center; padding-left: 15px; padding-right: 15px; }
#recipes_filters h3 { display: none; }
#recipes_filters > div { flex: 1 1 20%; min-width: 140px; }

/* Unified inputs & selects */
#recipes_filters select, #recipes_filters input[type="text"], #recipes_list .filter-dropdown { width: 100%; height: 2.5rem; padding: 0.5rem 1rem; border: 1px solid #A12322 !important; border-radius: 0; background-color: #fefefe !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); font-size: 1rem; color: #3F2321 !important; appearance: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
#apicius_recipe_filter_product { display: flex; align-items: center; order: 4; flex: 1 1 45%; padding: 0 !important; justify-content: flex-end; width: auto; max-width: 38%; }

/* Modern arrow for select dropdowns */
#recipes_filters select, #recipes_list .filter-dropdown { appearance: none; -webkit-appearance: none; background-image: url('/wp-content/plugins/apicius-products-recipes/images/select-arrow.svg'); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem; padding-right: 2rem; }

/* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); */

/* Focus state */
#recipes_filters select:focus, #recipes_filters input[type='http://www.w3.org/2000/svg']:focus { border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(161, 35, 34, 0.2); outline: none; }

/* Search & Filter button */
div#recipes_filters div#apicius_recipe_search_box { flex: 0 0 100%; width: 100%; padding: 0; }
div#apicius_recipe_filter_recipe_type_select, div#apicius_recipe_filter_recipe_main_ingredient_select { flex: 0 0 25%; padding: 0 !important; }
#apicius_recipe_search_box #searchform { max-width: 549px; display: flex; margin: 0 13px 0 auto; }
div#apicius_recipe_search_box input#searchsubmit { min-width: 150px; margin-left: 61px; }
#recipes_filters input[type='14'] { display: inline-block; padding: 15px 40px; font-size: 1rem; font-weight: 600; text-transform: uppercase; background-color: #A12322 !important; color: var(--accent-text); border: none; border-radius: 0; cursor: pointer; transition: background-color 0.2s ease; color: #fff; text-transform: capitalize; min-width: 150px; }
#recipes_filters input[type='8']:hover, #view_all:hover { background-color: var(--accent-hover); }
@media screen and (max-width:1000px) {
  .nice-select { margin-bottom: 15px !important; }
  #recipes_filters { flex-direction: column-reverse !important; }
  #recipes_filters>div { width: 100% !important; justify-content: center !important; }
  #recipes_filters>#apicius_recipe_filter_product { width: 100% !important; flex-direction: column; justify-content: center; text-align: center; }
  #recipes_filters>#apicius_recipe_search_box { width: 100% !important; flex-direction: column; justify-content: center; }
  #recipes_filters>#apicius_recipe_search_box input#s { margin-bottom: 15px !important; }
  #recipes_filters>#apicius_recipe_search_box #searchform { display: flex !important; width: 100% !important; flex-direction: column; justify-content: center; height: auto !important; }
  #view_all { max-width: 100% !important; width: 100% !important; }
}
@media screen and (max-width:1200px) {
  .product-tile, .recipe-tile { width: 33.33333% !important; }
}
@media screen and (max-width:1500px) {
  .product-title, .recipe-title { font-size: 22px !important; }
}
@media screen and (max-width:1200px) {
  .product-title, .recipe-title { font-size: 20px !important; }
}
@media screen and (max-width:1000px) {
  .product-title, .recipe-title { font-size: 18px !important; }
}
@media screen and (max-width:768px) {
  .product-tile, .recipe-tile { width: 50% !important; }
}
@media screen and (max-width:580px) {
  .product-tile, .recipe-tile { width: 100% !important; }
}

/*HOVER BUTTONS*/
.squarehover { opacity: 0 !important; position: absolute; z-index: 999; width: 100%; height: 100%; justify-content: center; align-items: center; display: flex; background: rgba(0, 0, 0, .5); }
.products-inner:hover .squarehover { opacity: 1 !important; }
.squarehoverbutton { font-weight: 500; font-style: normal; color: #F3E3AF; background: #9B1C23; border: 1px solid #9B1C23; padding: 10px 30px; font-size: 22px; text-transform: uppercase; }
.squarehoverbutton:hover { background: #F3E3AF; color: #9B1C23; }
.ginput_recaptcha { display: flex; justify-content: center; }

/*HIDING*/
@media screen and (max-width:768px) {
  .hideonmobile { display: none !important; }
}

/*  */

/* 1) Tell the row to stretch all cols to the same height */
#recipe_tiles .row { display: flex; flex-wrap: wrap; align-items: stretch;  /* <-- stretch cols vertically */ }

/* 2) Each column becomes a flex-column */
#recipe_tiles .row > [class*="col-"] { display: flex; flex-direction: column; margin-bottom: 1.5rem; /* if you want space between rows */ }

/* 3) Make the card fill the full height */
#recipe_tiles .recipe-tile { display: flex; flex-direction: column; flex: 1;             /* <-- grow to fill the col */ background: #fff;    /* whatever your card bg is */ }

/* 4) Push the title to the bottom */
#recipe_tiles .recipe-tile h3 { margin-top: auto;    /* <-- takes all remaining space above it */ padding: .75rem; text-align: center; }