@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* Base Colors */
:root {
    --color-primary: #121212;
    --color-surface: #2B2B2B;
    --color-accent: #6F746F;
    --color-white: #ffffff;
}

body {
    font-family: 'Inter', sans-serif !important;
}
img.details-shopimage:hover {
    filter: brightness(0) saturate(100%) invert(22%) sepia(69%) saturate(4267%) hue-rotate(339deg) brightness(93%) contrast(101%);
}
div#mobile-menu {
    height: 100vh;
}
div#embed-target {
    max-height: 100% !important;
}

.collection-wrapper {
    padding-bottom: 35px;
}
.product-page-filter select {
    border: 1px solid #797979 !important;
}
.collection-filter.category-page-side {
    padding-top: 20px;
}
/*Headings*/
h1 {
    font-size: clamp(1.75em, 5vw, 2.5em) !important;
    line-height: 1.2em !important;
}

h2 {
    font-size: clamp(1.5em, 5vw, 2em) !important;
    line-height: 1.2em !important;
}

h3 {
    font-size: clamp(1.35em, 5vw, 1.5em) !important;
    line-height: 1.2em !important;
}

h4 {
    font-size: clamp(1.25em, 5vw, 1.4em) !important;
    line-height: 1.2em !important;
}

h5 {
    font-size: clamp(1.15em, 5vw, 1.3em) !important;
    line-height: 1.2em !important;
}

h6 {
    font-size: clamp(1.05em, 5vw, 1.2em) !important;
    line-height: 1.2em !important;
}

.is_web {
    display: block;
}

.is_tab {
    display: none;
}

/* ---header css--- */
.header-area {
    backdrop-filter: blur(8px);
    box-shadow: 0px 4px 8px 0px #0000001A;
}
.sec-center .section-dropdown a{
    display:flex;gap:7px
}

/* parent wrapper should be positioned relative so dropdown is absolute to it */
.sec-center {
    position: relative;
    display: inline-block;
    /* keep as inline so it fits in header */
}
.btn.primary-btn:hover{background:#454545 !important;color:#ffffff !important;}
.collapse {
    visibility: visible !important;
}

p.MsoNoSpacing span {
    font-size: 18px !important;
}

.recipe-detailsdec {
    height: 400px;
    overflow: scroll;
    overflow-x: hidden;
}

.featured-recipe-sec .slick-track {
    margin: unset !important;
}

.recipe-title {font-size: 22px;margin-bottom: 15px;}
.recipe-content h3{font-weight:500}
.recipe-content h4 {font-size: 16px;margin-top: 20px;margin-bottom: 10px;border-bottom: 1px solid #e7e7e7;padding-bottom: 20px;}
.recipe-content ul,
.recipe-content ol {margin-left: 0;margin-bottom: 15px;}
.recipe-content li {margin-bottom: 6px;}
.recipe-yield {margin-top: 15px;font-size: 15px;}
.recipe-credit {margin-top: 12px;font-size: 14px !important;color: #000 !important;}
.recipe-credit {font-size: 14px;color: #000;line-height: 1.6;}
.recipe-credit a {color: #d35400;text-decoration: none;font-weight: 500;transition: all 0.3s ease;}
.recipe-credit a:hover {text-decoration: underline;color: #a84300;}
p.recipe-credit {font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size: 16px !important;letter-spacing: 0px;}

/* label cursor */
.for-dropdown {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
.cart-related-slider .slick-track {
    display: flex;
    gap: 20px;
}
.footer-links a:hover{
    color:#fff
}
.p-6.related-heading-main h3 {
    height: 50px;
}
.mainheader ul li {list-style: none;}
.mainheader ul li a{color: #000000;}
[ng-cloak],
.ng-cloak,
[x-ng-cloak] {
    display: none !important;
}
.home-mainheader {
position: absolute;
z-index: 11;
width: 100%;
background: #FFFFFF66;
backdrop-filter: blur(8px);
box-shadow: 0px 4px 8px 0px #0000001A;
}
.latest-serach-area .dropdown select {
    width: 150px;
}
.custom-nav button:hover{
background:#121212;
border-color: #121212 !important;
}
div#about-review .owl-stage{display: flex;}
div#about-review .item {
    display: flex;
    flex: 1 0 auto;
    height: 100%;
}
.about-review-box {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.custom-nav button:hover img {
filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(294deg) brightness(106%) contrast(107%); 

}

.homeprod-cat.ng-binding {
font-family: Inter;
font-weight: 400;
font-size: 18px;
color: #6F746F;
line-height: 22px;
letter-spacing: 0px;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}

/* default hidden dropdown (absolute so it doesn't push header) */
.sec-center .section-dropdown {
    position: absolute;
    top: calc(100% + 0px);
    /* 8px gap below label */
    right: 0;
    /* change to right:0 if you want it right-aligned */
    min-width: 210px;
    /* change width as needed */
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0;
    z-index: 1200;

    /* hide initially but keep space off the layout */
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    pointer-events: none;
    /* prevent clicks when hidden */
}

/* show when hovering the parent wrapper (label OR dropdown area) */
/* this ensures moving mouse from label into dropdown keeps it open */
.sec-center:hover .section-dropdown,
.sec-center:focus-within .section-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Optional: checkbox toggle support (mobile click) */
/* If you want click-to-toggle, uncomment the input in your HTML and use this selector */
/* Note: your input must be placed BEFORE the label and have id="dropdown" */
/* #dropdown:checked + .for-dropdown + .section-dropdown { ... } */
#dropdown:checked+.for-dropdown+.section-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* small styles for dropdown links to match your screenshot */

.sec-center .section-dropdown a:last-child {
    border-bottom: none;
}

/* badge / notifications */
.sec-center .section-dropdown .badge {
    margin-left: 6px;
}

.password-groupeye span.input-group-text {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

form#frmfright label {display: flex;gap: 5px;margin-bottom: 10px;align-items:center;}
form#frmfright label img {width:15px;height:15px}

/* optional: hover state for links */
.sec-center .section-dropdown a:hover {
    background: rgba(0, 0, 0, 0.03);
}

/* CMS Modal Content Styles */
.cms-content {
    font-family: 'Inter', sans-serif;
    color: #333;
    line-height: 1.6;
}

.cms-content h1,
.cms-content h2,
.cms-content h3,
.cms-content h4,
.cms-content h5,
.cms-content h6 {
    color: #121212;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 600;
}

.cms-content h1:first-child,
.cms-content h2:first-child,
.cms-content h3:first-child {
    margin-top: 0;
}

.cms-content p {
    margin-bottom: 1em;
    color: #4b5563;
}

.cms-content ul,
.cms-content ol {
    margin-bottom: 1em;
    padding-left: 1.5em;
}

.cms-content ul {
    list-style-type: disc;
}

.cms-content ol {
    list-style-type: decimal;
}

/* Force override any inline legacy styles that might be causing the red background */
.cms-content .bg-danger,
.cms-content .text-danger,
.cms-content [style*="background-color: red"],
.cms-content [style*="background-color: #ff0000"] {
    background-color: transparent !important;
    color: inherit !important;
}

/* Ensure images fit */
.cms-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1em 0;
}

/* Modal styling improvements */
#infoModal .modal-content {
    border: none;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

#infoModal .modal-header {
    background-color: #121212;
    color: white;
    border-bottom: 1px solid #1f2937;
}

#infoModal .close {
    color: white;
    text-shadow: none;
    opacity: 0.8;
}

#infoModal .close:hover {
    opacity: 1;
}

/* Dynamic merchandising tag shared by product cards */
.product-card-tag {
    position: absolute;
    top: 15px;
    z-index: 2;
    display: inline-flex;
    max-width: calc(100% - 30px);
    min-height: 32px;
    align-items: center;
    gap: 7px;
    padding: 7px 12px 7px 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 999px;
    background: rgba(18, 18, 18, 0.88);
    box-shadow: 0 6px 18px rgba(18, 18, 18, 0.16);
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.product-card-tag--left { left: 15px; }
.product-card-tag--right { right: 15px; }

.shop-product-grid .product-card-tag--shop {
    top: 10px;
    left: 10px;
    max-width: 118px;
    min-height: 26px;
    gap: 6px;
    padding: 5px 9px 5px 8px;
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(18, 18, 18, 0.82);
    box-shadow: 0 4px 12px rgba(18, 18, 18, 0.12);
    font-size: 12px;
    letter-spacing: 0.03em;
}

.shop-product-grid .product-card-tag--shop .product-card-tag-dot {
    flex-basis: 5px;
    width: 5px;
    height: 5px;
    box-shadow: 0 0 0 2px rgba(27, 169, 127, 0.18);
}

.product-card-tag-dot {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #1ba97f;
    box-shadow: 0 0 0 3px rgba(27, 169, 127, 0.2);
}

.product-card-tag-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575px) {
    .product-card-tag {
        top: 10px;
        max-width: calc(100% - 20px);
        min-height: 29px;
        padding: 6px 10px 6px 9px;
        font-size: 10px;
    }

    .product-card-tag--left { left: 10px; }
    .product-card-tag--right { right: 10px; }

    .shop-product-grid .product-card-tag--shop {
        max-width: 88px;
        min-height: 24px;
        padding: 4px 7px;
        font-size: 8px;
    }
}

/* Product hot-sauce disclaimer modal */
.product-disclaimer-modal .modal-dialog {
    max-width: 760px;
    padding: 16px;
}

.product-disclaimer-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(18, 18, 18, 0.28);
}

.product-disclaimer-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 26px 72px 22px 30px;
    border-top: 5px solid #1ba97f;
    border-bottom: 1px solid #eaeaea;
    background: #fff;
}

.product-disclaimer-icon {
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #fff4e8;
    color: #f97316;
    font-size: 20px;
}

.product-disclaimer-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: #1ba97f;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
}

.product-disclaimer-header h2 {
    margin: 0;
    color: #121212;
    font-family: "Inter", sans-serif;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.25;
}

.product-disclaimer-modal .product-disclaimer-close {
    position: absolute;
    top: 24px;
    right: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    background: #f7f7f7;
    color: #121212;
    font-size: 25px;
    font-weight: 300;
    line-height: 1;
    opacity: 1;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.product-disclaimer-modal .product-disclaimer-close:hover {
    background: #121212;
    color: #fff;
    transform: rotate(90deg);
}

.product-disclaimer-body {
    padding: 26px 30px 18px;
    background: #fff;
}

.product-disclaimer-content {
    max-height: min(48vh, 430px);
    padding: 22px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #eaeaea;
    border-radius: 16px;
    background: #fafafb;
    color: #605f5f;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.7;
    scrollbar-color: #a7a7a7 #ededed;
    scrollbar-width: thin;
}

.product-disclaimer-content h1,
.product-disclaimer-content h2,
.product-disclaimer-content h3,
.product-disclaimer-content h4,
.product-disclaimer-content h5,
.product-disclaimer-content h6 {
    margin: 20px 0 8px;
    color: #121212;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    line-height: 1.35;
}

.product-disclaimer-content p { margin: 0 0 12px; }
.product-disclaimer-content ul,
.product-disclaimer-content ol { margin: 0 0 14px; padding-left: 22px; }
.product-disclaimer-content > :first-child { margin-top: 0; }
.product-disclaimer-content > :last-child { margin-bottom: 0; }

.product-disclaimer-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 110px;
    color: #605f5f;
}

.product-disclaimer-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #d9eee7;
    border-top-color: #1ba97f;
    border-radius: 50%;
    animation: disclaimer-spin 0.75s linear infinite;
}

@keyframes disclaimer-spin { to { transform: rotate(360deg); } }

.product-disclaimer-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 13px 15px;
    margin-top: 14px;
    border: 1px solid #d9eee7;
    border-radius: 12px;
    background: #f1faf7;
    color: #3f6257;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

.product-disclaimer-note i { margin-top: 3px; color: #1ba97f; }

.product-disclaimer-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0 30px 28px;
    background: #fff;
}

.product-disclaimer-confirm {
    min-width: 150px;
    min-height: 48px;
    padding: 12px 24px;
    border: 0;
    border-radius: 999px;
    background: #121212;
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.product-disclaimer-confirm:hover,
.product-disclaimer-confirm:focus {
    background: #1ba97f;
    color: #fff;
    outline: none;
    transform: translateY(-1px);
}

@media (max-width: 575px) {
    .product-disclaimer-modal .modal-dialog { padding: 8px; margin: 8px auto; }
    .product-disclaimer-header { gap: 12px; padding: 22px 60px 18px 20px; }
    .product-disclaimer-icon { flex-basis: 42px; width: 42px; height: 42px; border-radius: 12px; }
    .product-disclaimer-header h2 { font-size: 21px; }
    .product-disclaimer-eyebrow { font-size: 10px; }
    .product-disclaimer-modal .product-disclaimer-close { top: 20px; right: 18px; width: 34px; height: 34px; }
    .product-disclaimer-body { padding: 18px 20px 14px; }
    .product-disclaimer-content { max-height: 46vh; padding: 17px; font-size: 13px; }
    .product-disclaimer-footer { padding: 0 20px 20px; }
    .product-disclaimer-confirm { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .product-disclaimer-spinner { animation: none; }
    .product-disclaimer-modal .product-disclaimer-close,
    .product-disclaimer-confirm { transition: none; }
}

/* ensure profile-image inside label stays inline and doesn't affect positioning */
.sec-center .profile-image {
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
}

/* small responsive tweak: if the dropdown would overflow right edge, tuck it inside */
@media (min-width: 0) {
    .sec-center {
        --dropdown-offset-right: 0;
    }
}

/* If you find dropdown going outside viewport on the right, change left:auto; right:0; in .section-dropdown */


.sec-center .section-dropdown a:hover {
    background: #000;
    color: #fff;
}

/* Hero Banner */
.hero-slider-area {
    position: relative;
}

/* .main-container.hero-slider-content {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 99;
    max-width: 50%;
} */

ul.profile-sidebar a.active img,
ul.profile-sidebar a:hover img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7486%) hue-rotate(120deg) brightness(101%) contrast(94%);
}

ul.profile-sidebar a.active {
    background: #121212;
    color: #fff;
}

ul.profile-sidebar a:hover {
    color: #fff;
}

.hero-slider-image {
    position: relative;
}

.hero-slider-image::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 2.45%, rgba(0, 0, 0, 0) 60.31%);
    top: 0;
    left: 0;
}

.main-container.hero-slider-content .btn.primary-btn::after {
    content: "";
    background: url(/fieworks-ecommerce/assets/images/homepage/arrow-right.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    width: 24px;
    height: 24px;
}

.hero-slider-image img {
    object-fit: cover;
}

.main-container.hero-slider-content .btn.primary-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 15px 24px;
}

div#banner-slider {
    position: relative;
}

section.hero-banner .owl-dots {
    position: absolute;
    bottom: 20px;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
}

/* banner pagination */
.theme-slider .col-12 {
    position: relative;
}

.theme-slider .home-banner-pagination {
    position: absolute;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    bottom: 24px;
    left: 50%;
    width: auto;
    margin: 0;
    padding: 8px 12px;
    border-radius: 999px;
    /* background: rgba(255, 255, 255, .72); */
    backdrop-filter: blur(5px);
    transform: translateX(-50%);
    z-index: 60;
}

.theme-slider .home-banner-pagination button {
    padding: 0 !important;
    width: 8px !important;
    height: 8px !important;
    border: 0;
    border-radius: 999px;
    background: rgba(18, 18, 18, .55) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .8);
    transition: width .25s ease, background .25s ease;
}

.theme-slider .home-banner-pagination button.is-active {
    width: 30px !important;
    background: #121212 !important;
    box-shadow: 0 0 0 1px #fff, 0 2px 8px rgba(0, 0, 0, .2);
}

/* section.hero-banner .owl-dots button.owl-dot.active span {
    width: 30px;
    height: 8px;
    opacity: 1;
    border-radius: 100px;
    background: #F5F5F5 !important;
    margin: 0 !important;
}

section.hero-banner .owl-dots button.owl-dot span {
    width: 8px;
    height: 8px;
    opacity: 1;
    background: #F5F5F5 !important;
    margin: 0 !important;
}

section.hero-banner .owl-dots button.owl-dot {
    margin: 0 !important;
} */

/* Search Box */
.search-box {
    display: flex;
    align-items: center;
    background: #f7f7f7;
    border-radius: 30px;
    padding: 4px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.search-box input {
    border: none;
    outline: none;
    background: transparent;
    padding: 10px 14px;
    width: 180px;
    font-size: 14px;
    color: #333;
}

.search-box button {
    background: #000;
    border: none;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.search-box button img {
    width: 14px;
}

/* Dropdown */
.dropdown {
    position: relative;
    display: inline-block;
}

.sidebar-menu .ng-scope .active {
    border-bottom: 2px solid #121212 !important;
    color: #121212;
    font-weight: 600;
}

li.first.active svg {
    background: #F5F5F5;
    border: none;
    outline: none;
    border-radius: 20px 0px 0px 20px;
}

li.sec.active svg {
    background: #F5F5F5;
    border: none;
    outline: none;
    border-radius: 0px 20px 20px 0px;
}

li.third.active svg {
    background: #F5F5F5;
    border: none;
    outline: none;
    border-radius: 0px 20px 20px 0px;
}

li.four.active svg {
    background: #F5F5F5;
    border: none;
    outline: none;
    border-radius: 0px 20px 20px 0px;
}

.collection-grid-view ul {
    border: 2px solid #EAEAEA;
    margin-left: auto;
    border-radius: 23px;
    max-width: fit-content
}

.collection-grid-view ul li {
    margin-left: 0px !important;
}

li.first svg,
li.sec svg,
li.third svg,
li.four svg {
    width: 60px !Important;
    height: 45px !Important;
    padding: 7px
}

li.first.active svg path,
li.sec.active svg path,
li.third.active svg path,
li.four.active svg path {
    fill: #121212
}

#selsort::after {
    content: "\f107";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    transition: transform 0.3s ease;
    font-family: 'FontAwesome';
}

/* .input-group {
position: absolute;
left: -180px;
z-index: 0;
} */
.count-box {
    background: #121212;
    padding: 7px;
    border-radius: 60px;
    width: 20px;
    height: 20px;
    color: #ffff;
    display: flex;
    font-size: 12px;
    justify-content: center;
    align-items: center;
}

.dropdown select {
    border: none;
    background: #f7f7f7;
    border-radius: 30px;
    padding: 10px 40px 10px 16px;
    font-size: 14px;
    color: #333;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

button.action-btn.default {
    display: flex !important;
}

button.action-btn.default,
button.action-btn.delete {
    margin: 0px !important;
}

/* Dropdown Arrow */
.dropdown::after {
    content: "\f107";
    position: absolute;
    right: 16px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #605F5F;
    pointer-events: none;
    transition: transform 0.25s ease;
}

.dropdown.open::after {
    content: "\f106";
}

/* Product CSS */
.product-price {
    position: absolute;
    top: 20px;
    right: 20px;
    border: 1px solid #F5F5F5;
    background: #EAEAEA;
    padding: 9px 18px;
    border-radius: 40px;
}

.product-card-img {
    position: relative;
}

.product-card-img img {
    border-radius: 16px;
}

.product-info h5 span {
    display: block;
    font-weight: 400;
    margin-top: 7px;
    color: #6F746F;
}

.btn.primary-btn.product-btn-2 {
    color: #121212;
    background: transparent;
    border: 1px solid #605F5F;
}

/* Explore Collections */
.explore-collections-layout {
    width: 100%;
}

.explore-collection-box,
.explore-collection-slide {
    min-width: 0;
}

.explore-collection-slide,
.explore-collection-slide .owl-carousel {
    width: 100%;
}

.explore-slide-box {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 360px;
    background-color: #F5F5F5;
    border-radius: 16px;
    overflow: hidden;
}

.explore-slide-box-text {
    position: relative;
    z-index: 1;
    flex: 1 1 52%;
    min-width: 0;
    padding: 40px;
}

.explore-slide-box-text a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #121212;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.explore-slide-box-text a::after {
    content: "\f105";
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 14px;
    transition: transform 0.2s ease;
}

.explore-slide-box-text a:hover {
    color: #454545;
    text-decoration: underline;
}

.explore-slide-box-text a:hover::after {
    transform: translateX(3px);
}

.explore-slide-box-img {
    display: flex;
    align-self: stretch;
    align-items: center;
    justify-content: flex-end;
    flex: 0 1 48%;
    min-width: 0;
}

.explore-slide-box-img img {
    height: 100%;
    max-height: 360px;
    object-fit: contain;
    width: 100%;
    object-position: center right;
}

/* Homepage */
.btn.primary-btn {
    background: #121212;
    padding: 15px 20px;
    border-radius: 70px;
    color: #ffffff;
}

.product-category-card {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
}

.product-category-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.offer-heading {
    font-size: 34px;
    font-weight: 500;
    line-height: 38px;
}

.offer-categorybtn {
    border-radius: 16px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.offer-categorybtn p {
    width: 150px;
    display: flex;
    justify-content: center;
}

.comman-categorybox {
    aspect-ratio: 4 / 5;
}

.comman-categorybox-wide {
    aspect-ratio: 7 / 5;
}

a.product-category-card p {
    position: absolute;
    top: 30px;
    left: 30px;
}

.cta-section1 button {
    display: flex;
    justify-content: start;
}

.main-container {
    max-width: 1360px;
    width: 100%;
    margin: 0 auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.featured-heading {
    font-size: 24px;
    font-weight: 500;
    line-height: 30px;
}

.featured-para {
    font-size: 18px;
    font-weight: 400;
    color: #605F5F;
}

.mobile-menu-inside {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

/* Footer */
.footer-heading {
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    margin-bottom: 20px;
}

.offer-text {
    font-size: 54px;
    font-weight: 500;
    line-height: 58px;
}

.footer-links a {
    font-size: 18px;
    font-weight: 400;
    color: #CBCBCB;
}

.newletter-head {
    font-size: 18px;
    font-weight: 400;
}

.subscription-head {
    font-size: 14px;
    font-weight: 400;
    color: #B7BAB7;
}

/* .newsletter-section {
    display: flex;
    align-items: baseline;
    flex-direction: column;
    gap: 10px;
    max-width: 80%;
} */

.input-newsletter {
    position: relative;
    max-width: 100%;
    width: 100%;
}

input.subscription-input {
    padding: 20px;
    border-radius: 50px;
    width: 100%;
}

.input-newsletter a {
    position: absolute !important;
    right: 10px;
    background: #121212;
    height: 80%;
    transform: translateY(-50%);
    top: 50%;
    border-radius: 50px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: normal;
    font-size: 18px;
    font-weight: 400;
}

.custom-nav img {
    width: 6px;
    height: 11px;
}

.custom-nav button {
    width: 60px;
    height: 60px;
    border: 1px solid #000 !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reviewer-info .rounded-full {
    width: 48px !important;
    height: 48px;
}

.reviewer-name span {
    display: block;
}

section.main-container.review-section {
    margin: 0px auto !important;
    padding: 0px 0px 80px 0px;
}

.faq-item.active span.toggle-icon {
    content: "";
    background: url(/fieworks-ecommerce/assets/images/homepage/minus-icon.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 16px;
    height: 10px;
    display: inline-block;

}

.faq-item span.toggle-icon {
    content: "";
    background: url(/fieworks-ecommerce/assets/images/homepage/plus-icon.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 18px;
    height: 18px;
    display: inline-block;

}

.inner-faq .faq-item span.toggle-icon img {
    display: none;
}

img.review-user {
    width: 60px !important;
}

div#about-review .owl-stage-outer {
        padding: 0px 1px 40px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: -20px;
    margin-right: -20px;
}

section.inn-about-reaview .owl-dots button.owl-dot.active span {
    width: 30px;
    height: 8px;
    opacity: 1;
    border-radius: 100px;
    background: #121212 !important;
    margin: 0 !important;
}

section.inn-about-reaview .owl-dots button.owl-dot span {
    width: 8px;
    height: 8px;
    opacity: 1;
    background: #121212 !important;
    margin: 0 !important;
}

section.inn-about-reaview .owl-dots button.owl-dot {
    margin: 0 !important;
}

section.inn-about-reaview .owl-dots {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 0 !important;
}

a.absolute.inset-0.z-0.ng-scope {
    /* background: #00000085; */
}

/* .product-box .check-price {
    text-decoration: line-through;
} */

.product .product-box .product-detail.detail-inline {
    padding: 0;
    background: transparent;
}

.product .product-box {
    padding-right: 0 !important;
}

.product-box .product-icon {
    opacity: 0;
    transition: all .7s ease;
}

/* Keep homepage card actions usable on touch screens and give the heart a
   stable, polished control when Angular swaps wishlist states. */
.latest-section .product-box .home-product-actions {
    opacity: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    top: 15px;
    right: auto;
    left: 15px;
    z-index: 2;
}

.latest-section .home-product-actions > a {
    width: 42px;
    height: 42px;
    border: 1px solid #eaeaea;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 12px rgba(18, 18, 18, .08);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.latest-section .home-product-actions > a:hover,
.latest-section .home-product-actions > a:focus-visible {
    border-color: #ed1d3d;
    box-shadow: 0 5px 14px rgba(237, 29, 61, .16);
    transform: translateY(-1px);
    outline: none;
}

.latest-section .home-wishlist-button i {
    background: transparent !important;
    color: #121212;
    border-radius: 0;
    transform-origin: center;
    transition: color .25s ease;
}

.latest-section .home-wishlist-button.is-active i {
    color: #ed1d3d !important;
}

.latest-section .home-wishlist-button.is-active {
    border-color: rgba(237, 29, 61, .28);
    background: #fff7f8;
}

.latest-section .home-wishlist-button.is-animating i {
    animation: home-wishlist-heart-pop .38s cubic-bezier(.2, .8, .3, 1);
}

.latest-section .home-wishlist-button.is-active.is-animating {
    animation: home-wishlist-button-pulse .4s ease-out;
}

/* Shared storefront wishlist control */
.icon-detail .wishlist-heart-button {
    width: 42px !important;
    height: 42px !important;
    border: 1px solid #eaeaea !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(18, 18, 18, .08);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.wishlist-heart-button i {
    background: transparent !important;
    color: #121212;
    border-radius: 0;
    transform-origin: center;
}

.wishlist-heart-button.is-active {
    border-color: rgba(237, 29, 61, .28) !important;
    background: #fff7f8 !important;
}

.wishlist-heart-button.is-active i {
    color: #ed1d3d !important;
}

.wishlist-heart-button.is-busy {
    cursor: wait !important;
    opacity: .7;
    pointer-events: none;
}

.icon-detail .wishlist-heart-button:hover,
.icon-detail .wishlist-heart-button:focus-visible {
    border-color: #ed1d3d !important;
    box-shadow: 0 5px 14px rgba(237, 29, 61, .16);
    transform: translateY(-1px);
    outline: none;
}

.wishlist-heart-button.is-active.wishlist-animating i {
    animation: home-wishlist-heart-pop .38s cubic-bezier(.2, .8, .3, 1);
}

.wishlist-heart-button:not(.is-active).wishlist-animating i {
    animation: wishlist-heart-remove .38s cubic-bezier(.4, 0, .2, 1);
}

@keyframes wishlist-heart-remove {
    0% {
        opacity: 1;
        transform: scale(1.2);
    }
    45% {
        opacity: .35;
        transform: scale(.55) rotate(8deg);
    }
    75% {
        opacity: 1;
        transform: scale(1.08) rotate(-3deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

.single-wishlist .wishlist-heart-button {
    padding: 9px 14px;
    border: 1px solid #eaeaea;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(18, 18, 18, .06);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.single-wishlist .wishlist-heart-button:hover,
.single-wishlist .wishlist-heart-button:focus-visible {
    border-color: #ed1d3d;
    box-shadow: 0 5px 14px rgba(237, 29, 61, .12);
    outline: none;
}

@keyframes home-wishlist-heart-pop {
    0% {
        opacity: .45;
        transform: scale(.65);
    }
    45% {
        opacity: 1;
        transform: scale(1.35) rotate(-10deg);
    }
    70% {
        transform: scale(.9) rotate(4deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

@keyframes home-wishlist-button-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(237, 29, 61, .3);
    }
    100% {
        box-shadow: 0 0 0 9px rgba(237, 29, 61, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .latest-section .home-wishlist-button,
    .latest-section .home-wishlist-button i,
    .wishlist-heart-button,
    .wishlist-heart-button i {
        animation: none;
        transition: none;
    }
}

.product-box .pro-add-btn {
    opacity: 0;
    transition: all .7s ease;
}

.product-box:hover .pro-add-btn {
    opacity: 1;
}


.product-back {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    transition: all 1s ease;
    opacity: 0;
}


.product-box:hover .product-back {
    opacity: 1;
}

.latest-section .product-box:hover .product-back,
.collection-product-wrapper .product-box:hover .product-back {
    opacity: 1;
}

.latest-section .product-box:hover .product-front,
.collection-product-wrapper .product-box:hover .product-front {
    opacity: 0;
}

.product-imgbox {
    position: relative;
    overflow: hidden;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a.active {
    border: 0 !important;
    color: #121212;
}

/* .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul li {
    margin-bottom: 6px;
} */

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul li a {
    color: #807E7E;
}

.main-product-box .icon-detail {
    opacity: 1;
    transition: all .7s ease;
}

.main-product-box:hover .icon-detail,
.main-product-box:hover .single-pro-add-btn {
    opacity: 1;

}

/* Coming Soon Page Styles */
.coming-soon-section {
    font-family: 'Inter', sans-serif;
}

.coming-soon-section h1 {
    letter-spacing: -0.02em;
}

#countdown-timer span.block {
    font-variant-numeric: tabular-nums;
}

.coming-soon-section input::placeholder {
    color: #9CA3AF;
}

.coming-soon-section button:hover {
    background-color: #000000;
}

@media (max-width: 768px) {
    .coming-soon-section {
        flex-direction: column;
    }

    .coming-soon-section>div:first-child {
        height: 50vh;
    }

    .coming-soon-section>div:last-child {
        height: auto;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

.single-pro-add-btn {
    opacity: 0;
    transition: all .7s ease;
}

.collection-product-wrapper .product-top-filter .product-filter-content .product-page-per-view select,
.collection-product-wrapper .product-top-filter .product-filter-content .product-page-filter select,
.collection-product-wrapper .product-top-filter .popup-filter .product-page-per-view select,
.collection-product-wrapper .product-top-filter .popup-filter .product-page-filter select {
    border: 0;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    background: url(../images/dropdown.png) no-repeat 95%;
    color: #121212;
    font-weight: 500;
    letter-spacing: 0;
    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
}

.collection-product-wrapper .product-top-filter .product-filter-content .product-page-filter {
    width: 100%;
}

.collection-collapse-block .collapse-block-title:after {
    position: absolute;
    display: block;
    top: 0;
    right: -3px;
    content: "\f107";
    font-family: FontAwesome;
    color: #333;
}

.collection-collapse-block.open .collapse-block-title:after {
    content: "\f00d";
    /* Cross icon */
}

/* Category Sidebar Arrows */
.sidebar-wrapper .sidebar-menu .sidebar-dropdown>a:after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f105";
    /* Right arrow */
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 5px;
    transition: transform 0.3s ease;
    font-size: 14px;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown.active>a:after,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown a.active:after {
    /* content: "\f107" !important; */
    transform: none;
}

.collection-wrapper .collection-content .top-filter-border .collection-grid-view ul li.active svg path {
    fill: #121212 !important;
}

.product-pagination .pagination ul li a {
    border: 1px solid #EAEAEA;
    border-radius: 10px;
    color: #605F5F;
    font-size: 16px;
    padding: 9px 14.5px !important;
}

.product-pagination .pagination ul {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.product-pagination .pagination ul li.active a {
    background: #121212;
    color: #fff;
}

/* Policy pages: normalize legacy CMS markup into a readable legal document. */
.legal-page {
    min-height: 70vh;
    background: #f7f7f5;
    color: #292929;
}

.legal-page-header,
.legal-document {
    width: min(100%, 920px);
    margin-right: auto;
    margin-left: auto;
}

.legal-page-header {
    margin-bottom: 24px;
    padding: 42px 48px;
    border-radius: 20px;
    background: #121212;
    color: #fff;
}

.legal-page-kicker {
    display: block;
    margin-bottom: 10px;
    color: #d6d6d1;
    font: 700 12px/1.4 'Inter', sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.legal-page-header h1 {
    margin: 0;
    color: #fff;
    font: 650 clamp(34px, 4vw, 50px)/1.12 'Inter', sans-serif;
    letter-spacing: -.04em;
}

.legal-page-header p {
    max-width: 650px;
    margin: 14px 0 0;
    color: #d6d6d1;
    font: 400 15px/1.65 'Inter', sans-serif;
}

.legal-document {
    padding: 48px 56px;
    border: 1px solid #e7e7e3;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(18, 18, 18, .055);
}

.legal-document,
.legal-document * {
    box-sizing: border-box;
    font-family: 'Inter', sans-serif !important;
}

.legal-document .page_heading.article_heading,
.legal-document > div > h1:first-child,
.legal-document .legal-redundant-title {
    display: none !important;
}

.legal-document p {
    margin: 0 0 18px !important;
    color: #4b4b48 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: -.005em;
    line-height: 1.8 !important;
}

.legal-document .legal-section-heading,
.legal-document .legal-section-copy {
    margin-top: 34px !important;
    padding-top: 30px;
    border-top: 1px solid #ecece8;
}

.legal-document .legal-section-heading:first-child,
.legal-document .legal-section-copy:first-child {
    margin-top: 0 !important;
    padding-top: 0;
    border-top: 0;
}

.legal-document .legal-section-heading > strong:first-child,
.legal-document .legal-section-heading > b:first-child,
.legal-document .legal-section-copy > strong:first-child,
.legal-document .legal-section-copy > b:first-child {
    display: block;
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: 0 !important;
    color: #161616 !important;
    font-size: 20px !important;
    font-weight: 650 !important;
    letter-spacing: -.02em;
    line-height: 1.35 !important;
}

.legal-document .legal-company-name {
    margin: 0 0 10px !important;
    padding: 0;
    border: 0;
}

.legal-document .legal-company-name strong {
    color: #6a6a66 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.legal-document .legal-list-line {
    margin-bottom: 10px !important;
    padding-left: 18px;
    border-left: 2px solid #e2e2de;
}

.legal-document .legal-plain-heading {
    margin-top: 34px !important;
    margin-bottom: 10px !important;
    padding-top: 30px;
    border-top: 1px solid #ecece8;
    color: #161616 !important;
    font-size: 20px !important;
    font-weight: 650 !important;
    letter-spacing: -.02em;
    line-height: 1.35 !important;
}

.legal-document a {
    color: #121212 !important;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.legal-document h2,
.legal-document h3,
.legal-document h4 {
    margin: 30px 0 12px;
    color: #161616 !important;
    font-weight: 650 !important;
    letter-spacing: -.02em;
    line-height: 1.35 !important;
}

.legal-document h2 { font-size: 24px !important; }
.legal-document h3 { font-size: 20px !important; }
.legal-document h4 { font-size: 17px !important; }

@media (max-width: 767px) {
    .legal-page-header {
        margin-bottom: 16px;
        padding: 28px 22px;
        border-radius: 16px;
    }

    .legal-page-header h1 { font-size: 32px; }

    .legal-document {
        padding: 30px 22px;
        border-radius: 16px;
    }

    .legal-document p {
        font-size: 15px !important;
        line-height: 1.75 !important;
    }

    .legal-document .legal-section-heading > strong:first-child,
    .legal-document .legal-section-heading > b:first-child,
    .legal-document .legal-section-copy > strong:first-child,
    .legal-document .legal-section-copy > b:first-child {
        font-size: 18px !important;
    }
}

.related-slider-col .slick-slide, .featured-recipe-sec .slick-slide {
    padding: 0 12px;
}

.related-slider-col .slick-list {
    margin: 0 -12px;
}


.pagination ul {
    box-shadow: unset !important;
}

.collection-mobile-back {
    display: none;
}

.rating.three-star i {
    color: #FD7E14 !important;
}

.nav-tabs .nav-link {
    border-radius: 50px !important;
    box-shadow: unset;
    border: 0;
    color: #454545 !important;
}

.pdesc p {
    margin-bottom: 20px;
}

.pdesc p:last-child {
    margin: 0;
}

/* Product detail description: normalize CMS typography and preserve hierarchy. */
.product-copy-panel {
    padding: 42px 48px !important;
    border: 1px solid #ededeb;
    background: #fafaf8 !important;
}

.product-copy,
.product-copy * {
    box-sizing: border-box;
    font-family: 'Inter', sans-serif !important;
}

.product-copy {
    max-width: 900px;
    color: #4b4b48;
    font-size: 16px;
    letter-spacing: -.006em;
    line-height: 1.82;
}

.product-copy p {
    margin: 0 0 20px !important;
    color: #4b4b48 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.82 !important;
}

.product-copy h1,
.product-copy h2,
.product-copy h3,
.product-copy h4,
.product-copy h5,
.product-copy h6 {
    margin: 32px 0 12px !important;
    color: #171717 !important;
    font-weight: 650 !important;
    letter-spacing: -.025em;
    line-height: 1.3 !important;
}

.product-copy h1 { font-size: 28px !important; }
.product-copy h2 { font-size: 24px !important; }
.product-copy h3 { font-size: 21px !important; }
.product-copy h4,
.product-copy h5,
.product-copy h6 { font-size: 18px !important; }

.product-copy strong,
.product-copy b {
    color: #242424;
    font-weight: 650 !important;
}

.product-copy ul,
.product-copy ol {
    margin: 4px 0 24px 24px !important;
    padding: 0 !important;
}

.product-copy ul { list-style: disc !important; }
.product-copy ol { list-style: decimal !important; }

.product-copy li {
    display: list-item !important;
    margin: 0 0 9px !important;
    padding-left: 5px;
    color: #4b4b48 !important;
    font-size: 16px !important;
    line-height: 1.72 !important;
}

.product-copy li::marker {
    color: #767670;
    font-weight: 600;
}

.product-copy a {
    color: #121212 !important;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.product-copy blockquote {
    margin: 26px 0;
    padding: 18px 22px;
    border-left: 3px solid #121212;
    border-radius: 0 12px 12px 0;
    background: #f0f0ed;
}

.product-copy table {
    width: 100% !important;
    margin: 26px 0 !important;
    border-collapse: collapse;
    font-size: 14px !important;
}

.product-copy th,
.product-copy td {
    padding: 12px 14px !important;
    border: 1px solid #dfdfdc !important;
    text-align: left;
    vertical-align: top;
}

.product-copy th {
    background: #efefec;
    color: #171717;
    font-weight: 650;
}

.product-copy > :first-child { margin-top: 0 !important; }
.product-copy > :last-child { margin-bottom: 0 !important; }

/* Product-linked recipes. */
.related-recipes-section {
    padding: 24px;
    border: 1px solid #ecece8;
    border-radius: 20px;
    background: #fafaf8;
}

.related-recipes-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.related-recipes-kicker {
    display: block;
    margin-bottom: 6px;
    color: #777771;
    font: 700 11px/1.4 'Inter', sans-serif;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.related-recipes-heading h2 {
    margin: 0;
    color: #151515;
    font: 650 25px/1.2 'Inter', sans-serif;
    letter-spacing: -.035em;
}

.related-recipes-heading p {
    margin: 0 0 3px;
    color: #777771;
    font: 500 13px/1.5 'Inter', sans-serif;
}

.related-recipe-card {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid #e4e4df !important;
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(18, 18, 18, .035) !important;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.related-recipe-card:hover {
    border-color: #d3d3ce !important;
    box-shadow: 0 10px 24px rgba(18, 18, 18, .075) !important;
    transform: translateY(-2px);
}

.related-recipe-media {
    display: block;
    width: 100%;
    height: 158px !important;
    overflow: hidden;
    background: #f1f1ee;
}

.related-recipe-image-wrap,
.related-recipe-visual,
.related-recipe-visual > div {
    width: 100% !important;
    height: 158px !important;
    min-height: 158px !important;
    max-height: 158px !important;
    overflow: hidden !important;
}

.related-recipe-visual,
.related-recipe-visual > div,
.related-recipe-media img,
.related-recipe-media iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
}

.related-recipe-media img {
    display: block;
    object-fit: cover !important;
    transition: transform .35s ease;
}

.related-recipe-card:hover .related-recipe-media img {
    transform: scale(1.035);
}

.related-recipe-content {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 128px;
    background: #fff !important;
}

.related-recipe-content-inner {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 16px;
}

.related-recipe-type {
    display: block;
    margin-bottom: 7px;
    color: #8a8a84;
    font: 700 10px/1.3 'Inter', sans-serif;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.related-recipe-title {
    display: -webkit-box;
    min-height: 44px;
    margin: 0;
    overflow: hidden;
    color: #171717 !important;
    font: 650 16px/1.38 'Inter', sans-serif !important;
    letter-spacing: -.02em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.related-recipe-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: #686863;
    font: 600 12px/1.4 'Inter', sans-serif;
}

.related-recipe-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 13px;
    border-top: 1px solid #eeeeeb;
}

.related-recipe-author {
    min-width: 0;
    overflow: hidden;
    color: #777771;
    font: 500 11px/1.4 'Inter', sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.related-recipe-card:hover .related-recipe-link {
    color: #121212;
}

@media (max-width: 1023px) {
    .product-copy-panel {
        padding: 0 !important;
        border: 0;
        background: transparent !important;
    }

    .product-copy,
    .product-copy p,
    .product-copy li {
        font-size: 15px !important;
        line-height: 1.75 !important;
    }

    .related-recipes-mobile .related-recipe-title {
        min-height: auto;
        font-size: 17px !important;
    }

    .related-recipes-mobile .related-recipe-card {
        display: block !important;
    }

    .related-recipes-mobile .related-recipe-content-inner {
        padding: 16px;
    }
}

@media (max-width: 639px) {
    .related-recipes-heading {
        display: block;
    }

    .related-recipes-heading h2 {
        font-size: 23px;
    }

    .related-recipes-heading p {
        margin-top: 7px;
    }

    .related-recipes-section {
        padding: 18px;
        border-radius: 16px;
    }

    .product-copy table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}


.related-slider-col img.arrow-btn,
.cart-related-slider img.arrow-btn {
    width: 44px;
    height: 44px;
    background: #F5F5F5;
    border-radius: 50px;
    padding: 12px;
    object-fit: contain;
    cursor: pointer;
    position: absolute;
    top: -75px;
    right: 0;
}

.related-slider-col img.arrow-btn.left-arrow.slick-arrow,
.cart-related-slider img.arrow-btn.left-arrow.slick-arrow {
    right: 55px;
}

.related-slider-col slick.slider,
.cart-related-slider slick.slider {
    position: relative;
}



.profile-image a {
    border-radius: 50%;
    display: inline-block;
}

.profile-image a img {
    border-radius: 50%;
    width: 25px !important;
    height: 25px !important;
    object-fit: cover !important;
}



/* Toast Css */
.toast-title {
    font-weight: 700;
}

.toast-message {
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}

.toast-message a,
.toast-message label {
    color: #fff;
}

.toast-message a:hover {
    color: #ccc;
    text-decoration: none;
}

.toast-close-button {
    position: relative;
    right: -0.3em;
    top: -0.3em;
    float: right;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    -webkit-text-shadow: 0 1px 0 #fff;
    text-shadow: 0 1px 0 #fff;
    opacity: 0.8;
    -ms-filter: alpha(Opacity=80);
    filter: alpha(opacity=80);
}

.toast-close-button:focus,
.toast-close-button:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: 0.4;
    -ms-filter: alpha(Opacity=40);
    filter: alpha(opacity=40);
}

button.toast-close-button {
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
    -webkit-appearance: none;
}

.toast-top-center {
    top: 0;
    right: 0;
    width: 100%;
}

.toast-bottom-center {
    bottom: 0;
    right: 0;
    width: 100%;
}

.toast-top-full-width {
    top: 0;
    right: 0;
    width: 100%;
}

.toast-bottom-full-width {
    bottom: 0;
    right: 0;
    width: 100%;
}

.toast-top-left {
    top: 12px;
    left: 12px;
}

.toast-top-right {
    top: 12px;
    right: 12px;
}

.toast-bottom-right {
    right: 12px;
    bottom: 12px;
}

.toast-bottom-left {
    bottom: 12px;
    left: 12px;
}

#toast-container {
    position: fixed;
    z-index: 999999;
}

#toast-container * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#toast-container>div {
    position: relative;
    overflow: hidden;
    margin: 0 0 6px;
    padding: 15px 15px 15px 50px;
    width: 300px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background-position: 15px center;
    background-repeat: no-repeat;
    -moz-box-shadow: 0 0 12px #999;
    -webkit-box-shadow: 0 0 12px #999;
    box-shadow: 0 0 12px #999;
    color: #fff;
    opacity: 0.8;
    -ms-filter: alpha(Opacity=80);
    filter: alpha(opacity=80);
}

#toast-container> :hover {
    -moz-box-shadow: 0 0 12px #000;
    -webkit-box-shadow: 0 0 12px #000;
    box-shadow: 0 0 12px #000;
    opacity: 1;
    -ms-filter: alpha(Opacity=100);
    filter: alpha(opacity=100);
    cursor: pointer;
}

#toast-container>.toast-info {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=) !important;
}

#toast-container>.toast-error {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=) !important;
}

#toast-container>.toast-success {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==) !important;
}

#toast-container>.toast-warning {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=) !important;
}

#toast-container.toast-bottom-center>div,
#toast-container.toast-top-center>div {
    width: 300px;
    margin: auto;
}

#toast-container.toast-bottom-full-width>div,
#toast-container.toast-top-full-width>div {
    width: 96%;
    margin: auto;
}

.toast {
    background-color: #030303;
}

.toast-success {
    background-color: #121212;
}

.toast-error {
    background-color: #bd362f;
}

.toast-info {
    background-color: #2f96b4;
}

.toast-warning {
    background-color: #f89406;
}

.toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    background-color: #000;
    opacity: 0.4;
    -ms-filter: alpha(Opacity=40);
    filter: alpha(opacity=40);
}

#column_left {
    background-color: #515151;
}

.nav-list li a {
    text-decoration: none;
    display: block;
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #515151 !important;
    color: #9d9d9d;
}

.nav-list>li>a {
    color: #C4C4C4;
    font-size: 14px;
    padding-left: 13px !important;
    border-bottom: 1px solid #585858;
}

.nav-list>li>a:hover {
    background-color: #444444;
}

@keyframes swing {
    0% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(10deg);
    }

    30% {
        transform: rotate(0deg);
    }

    40% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(0deg);
    }

    60% {
        transform: rotate(5deg);
    }

    70% {
        transform: rotate(0deg);
    }

    80% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes sonar {
    0% {
        transform: scale(0.9);
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.page-wrapper .sidebar-wrapper,
.sidebar-wrapper .sidebar-brand>a,
.sidebar-wrapper .sidebar-dropdown>a:after,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before,
.sidebar-wrapper ul li a i,
.page-wrapper .page-content,
.sidebar-wrapper .sidebar-search input.search-menu,
.sidebar-wrapper .sidebar-search .input-group-text,
.sidebar-wrapper .sidebar-menu ul li a,
#show-sidebar,
#close-sidebar {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/*----------------sidebar-wrapper----------------*/

.sidebar-wrapper {
    margin-top: 20px;
}

/* .sidebar-wrapper ul {list-style-type: none;padding: 0;margin: 0;} */
.sidebar-wrapper a {
    text-decoration: none;
}




/*----------------------sidebar-menu-------------------------*/
.sidebar-wrapper .sidebar-menu {
    padding-bottom: 10px;
}

.sidebar-wrapper .sidebar-menu ul li {
    display: block;
    line-height: 30px;
        border-bottom: 1px solid #f3f3f3;
    padding-bottom: 10px;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown>a:after {
    font-family: "FontAwesome";
    font-weight: 600;
    content: "\f105";
    font-style: normal;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    background: 0 0;
    position: absolute;
    right: 0px;
    font-size: 18px;
    top: 7px;
}

.sidebar-wrapper .sidebar-menu .sidebar-submenu {
    display: none;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown.active>a:after {
    transform: rotate(90deg);
    right: 0px;
}

.recipe-loader-overlay {
    background-color: rgba(0, 0, 0, 0.6);
    margin: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
}

.recipe-loader-overlay img {
    height: 130px;
}

.recipes-pegination {margin-top: 20px !important;}

/* ---responsive css--- */

@media (max-width: 1536px) and (min-width: 1024px){
.explore-slide-box {
flex-direction: row;
}
.explore-slide-box-text {
flex-basis: 52%;
}
.explore-slide-box-img {
flex-basis: 48%;
}    
.double-btn a {
padding: 10px 10px;
font-size: 15px !important;
line-height: normal;
}
}


@media (max-width: 1536px) and (min-width: 1280px) {
    .main-container.hero-slider-content {
        /* max-width: 70%; */
    }
}

@media (max-width: 1279px) and (min-width: 1024px) {
    .main-container.hero-slider-content {
        /* max-width: 80%; */
    }

    .order-heading {
        font-size: 32px;
        padding-bottom: 0;
    }
}



@media (max-width: 1023px) and (min-width: 768px) {
    .main-container.hero-slider-content {
        /* max-width: 80%; */
    }

    .main-container.hero-slider-content p br {
        display: none;
    }

    section.in-about-sect-1 h2 br {
        display: none;
    }
    .receipe-product-card {height: 430px !important;}



}





/* Tablet (767px - 1024px) */
@media (min-width: 767px) and (max-width: 1024px) {
    .offer-heading {
        font-size: 24px;
        line-height: 30px;
    }

    .offer-footer {
        font-size: 36px;
        line-height: 45px;
    }

    .footer-links a {
        font-size: 14px;
        line-height: 15px;
    }

    .footer-heading {
        font-size: 18px;
    }

    a.product-category-card p {
        top: 15px;
        left: 20px;
    }
}




@media (max-width: 1024px) {

    li.first svg,
    li.sec svg,
    li.third svg,
    li.four svg {
        width: 50px !important;
        height: 40px !important;
    }

    .product-pagination .pagination ul {
        gap: 5px;
        overflow-x: auto;
        padding-bottom: 15px;
        flex-wrap: wrap;
    }

    input.subscription-input {
        padding: 15px 15px;
    }

    .input-newsletter a {
        right: 5px;
        height: 85%;
        padding: 10px 15px;
        font-size: 16px;
    }

    .footer-links a {
        font-size: 13px;
    }
}

/* Mobile (max 767px) */
@media (min-width: 1024px) {
    .sign-contdiv {
        padding: 0px !important;
    }
}

@media (max-width: 1023px) {
    .slick-dotted.slick-slider{
        margin-bottom: 0px;
    }
    .product-box .pro-add-btn {
    opacity: 1;
    }
    .product-box .pro-add-btn button{
        position: relative;
    }
    .btn.primary-btn{
        padding: 15px 30px;
    }
    
div#about-review .owl-stage-outer{
       padding: 0px 1px 40px;
    padding-left: 3px;
    padding-right: 3px;
    margin-left: -5px;
    margin-right: -5px;
}
    .recipe-detailsdec {
        height: unset;
    }

    .sec-center .section-dropdown {
        right: 0 !important;
        left: unset !important;
    }

    .comman-categorybox {
        margin-top: 0;
    }

    .main-container {
        max-width: 550px !important;
        margin: auto;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .main-container.hero-slider-content p br {
        display: none;
    }

    section.hero-banner .owl-dots {
        display: none;
    }

    .is_web {
        display: none;
    }

    .is_tab {
        display: block;
    }

    .header-area {
        position: absolute;
        z-index: 8;
        width: 100%;
        backdrop-filter: blur(8px);
        box-shadow: 0px 2px 4px 0px #0000000F;
        background: #FFFFFF66;
        top: 0;
        left: 0;
    }

    .offer-categorybtn a.w-fit {
        margin: 0 auto !important;
    }

    .offer-heading {
        font-size: 24px;
        line-height: 1.2em;
    }

    a.product-category-card p {
        top: 10px;
        left: 20px;
    }

    div#dropdown {
        width: 100%;
    }

    .dropdown select {
        width: 100%;
    }

    .search-box {
        justify-content: space-between;
        margin-bottom: 15px;
    }

    .latest-product-btn-area {
        flex-direction: column !important;
    }

    .latest-product-btn-area button {
        width: 100%;
    }

    .latest-product-btn-area button a {
        width: 100%;
        text-align: left;
    }

    section.in-about-sect-1 h2 br,
    .hero-about-heading br {
        display: none;
    }

    .collection-filter {
        position: fixed;
        height: 100vh;
        top: 0;
        left: -350px;
        background-color: white;
        z-index: 99;
        overflow-y: scroll;
        max-width: 350px;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

    .collection-filter.category-page-side {
        padding: 20px 30px 20px 40px;
    }

    .collection-collapse-block .collapse-block-title:after {
        display: none;
    }

    .collapse-block-title-area {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .collection-mobile-back {
        display: block;
    }

    .product-page-filter {
        width: fit-content !important;
    }

    .collection-product-wrapper .product-top-filter .product-filter-content .product-page-filter select {
        padding: 5px;
    }

    .search-count-mobile {
        border-bottom: 1px solid #ccc;
        padding-bottom: 10px;
    }

    section.shop-hero-section p br {
        display: none;
    }

    .picZoomer-pic {
        height: auto !important;
    }

    .picZoomer-pic-wp {
        height: auto !important;
    }

    .offer-footer br {
        display: none;
    }

    .footer-links a {
        font-size: 15px;
        line-height: 18px;
    }

    header.shadow-md {
        position: absolute;
        width: 100%;
        z-index: 9;
        /* backdrop-filter: blur(8px); */
        box-shadow: 0px 2px 4px 0px #0000000F;
        background: #FFFFFF66;
    }

    .main-container.hero-slider-content {
        /* top: 100px; */
    }

    .main-container.hero-slider-content {
        max-width: 100% !important;
    }

    .hero-slider-content p br {
        display: none;
    }

    .explore-slide-box {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        background: #F5F5F5;
        padding: 0;
        border-radius: 20px;
        align-items: stretch;
        gap: 0;
        min-height: 0;
    }

    .explore-slide-box-text {
        flex: none;
        width: 100%;
        padding: 24px 24px 16px;
    }

    .explore-slide-box-img {
        align-self: auto;
        flex: none;
        width: 100%;
        justify-content: center;
    }

    .explore-slide-box-img img {
        width: 100% !important;
        height: 250px;
        max-height: 250px;
        object-position: center;
    }

    section.main-container.review-section {
        margin: 0px auto !important;
    }

    .order-heading {
        font-size: 28px !important;
        padding: 0;
        margin-top: 40px;
    }

    .user-sidebar {
        margin-bottom: 40px;
        margin-top: 110px;
    }

    div#mobile-back-btn {
        margin-top: 70px;
    }

    .pdesc p {
        letter-spacing: 0;
        font-size: 15px;
    }

    div#mob-questions p {
        letter-spacing: 0;
    }

    .slick-list {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
    
    section.shop-hero-section .flex-col {
padding: 0 !important;
}
.single-pro-add-btn.absolute {
position: unset;
transform: unset;
margin: 0 auto 15px;
}

.main-product-box.icon-detail, .main-product-box .single-pro-add-btn {
opacity: 1;
}

div#mobile-back-btn {
        margin-top: 80px;
    }
    div#mobile-profile-header {
    padding-top: 0;
}
.profile-sidebar li a:hover {
    background: #000;
}
    .recipe-box h4 {
    height: 70px;
}

.recipedetail-area {
    margin-top: 60px;
}

.receipe-product-card {
height: auto !important;
}

section.in-about-sect-1 .grid {display: flex; flex-direction: column-reverse; gap: 20px;}
section.in-about-sect-1 {padding-bottom: 30px; padding-top: 40px;}
section.in-about-sect-1 .mt-3 {line-height: normal !important;}
section.about-shipng-section .grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
section.about-shipng-section .grid .py-4:nth-child(2) {width: 50%;float: left;order: 2;}
section.about-shipng-section .grid .py-4:nth-child(3) {
width: 50%;
float: left;
order: 3;
}

section.about-shipng-section .grid .py-4:nth-child(1) {
order: 1;
/* width: 100%; */
float: left;
}
section.about-shipng-section {padding-bottom: 30px;}
div#page-title {
    padding-top: 50px;
}
.cart-section-heading {text-align: center; margin: 20px 0 30px;}
.product-icon {
padding-top: 0;
margin-top: 0;
}
.notifications-area .justify-end {
display: flex;
flex-direction: unset;
}
.notifications-area.flex.justify-between {
display: flex;
flex-direction: column-reverse;
}


}

@media (min-width: 768px) {
  .receipe-product-card{height:330px !important}
}

@media (max-width: 767px) {
    .hero-main-text br {
        display: none;
    }

    .featured-heading {
        font-size: 19px;
    }

    .featured-para {
        font-size: 16px;
    }

    .product .product-box .product-imgbox img {
        height: 200px;
    }

    .product-price {
        top: 10px;
        right: 10px;
        padding: 6px 12px;

    }
    .collection-product-wrapper .product-top-filter .product-filter-content .product-page-filter select {
padding: 5px 30px 5px 20px;
}
li.third.active svg {
border-radius: 20px 0px 0px 20px;
}
.collection-product-wrapper .product-top-filter .product-filter-content .product-page-filter select {
padding: 5px 30px 5px 20px;
}
li.third.active svg {
border-radius: 20px 0px 0px 20px;
}
.recipe-box h4 {
    height: auto;
}
.flex.flex-wrap.justify-center.gap-3.mb-12 {
    flex-direction: column;
}
}

@media (max-width: 567px){
 .other-adress-btn {flex-direction: column; }   
}

@media all and (max-width: 480px) {
    .shpping-order img.img-fluid {
        width: 110px !important;
    }

    .add_to_cart.left {
        width: 320px;
    }
}

@media all and (max-width: 240px) {
    #toast-container>div {
        padding: 8px 8px 8px 50px;
        width: 11em;
    }

    #toast-container .toast-close-button {
        right: -0.2em;
        top: -0.2em;
    }
}

@media all and (min-width: 241px) and (max-width: 480px) {
    #toast-container>div {
        padding: 8px 8px 8px 50px;
        width: 18em;
    }

    #toast-container .toast-close-button {
        right: -0.2em;
        top: -0.2em;
    }
}

@media all and (min-width: 481px) and (max-width: 768px) {
    #toast-container>div {
        padding: 15px 15px 15px 50px;
        width: 25em;
    }
}

.shop-hero-background {
    background-image: url('../images/shop-img/mobile-shop-background.webp');
}

@media (min-width: 768px) {
    .shop-hero-background {
        background-image: url('../images/shop-img/inner-porduct-bg.webp');
    }
}

/* Hot sauce consent modal */
.disclaimer-consent-modal .modal-dialog {
    max-width: 520px;
    padding: 16px;
}

.disclaimer-consent-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(18, 18, 18, 0.22);
}

.disclaimer-consent-modal .modal-body,
.disclaimer-consent-modal .modal-bg,
.disclaimer-consent-modal .offer-content {
    padding: 0 !important;
    background: #fff !important;
}

.disclaimer-consent-modal .offer-content > div {
    position: relative;
    padding: 32px;
}

.disclaimer-consent-modal .offer-content > div::before {
    content: "Hot Sauce Disclaimer";
    display: block;
    padding-right: 42px;
    margin-bottom: 22px;
    color: #121212;
    font-family: "Inter", sans-serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.03em;
}

.disclaimer-consent-modal .close {
    position: absolute !important;
    top: 26px !important;
    right: 28px !important;
    z-index: 2;
    width: 34px;
    height: 34px;
    padding: 0 !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 50%;
    background: #f7f7f7 !important;
    color: #121212 !important;
    font-size: 22px;
    line-height: 30px;
    opacity: 1;
}

.disclaimer-consent-modal .form-group {
    margin: 0 !important;
}

.disclaimer-consent-modal .form-group .mt-1 {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 2px 12px;
    align-items: start;
    padding: 18px;
    margin: 0 0 18px !important;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    background: #f7f7f7;
}

.disclaimer-consent-modal #chkaccept {
    width: 18px !important;
    height: 18px !important;
    margin: 2px 0 0 !important;
    accent-color: #121212;
}

.disclaimer-consent-modal .form-group b {
    color: #605f5f;
    font-family: "Inter", sans-serif;
    font-size: 14px !important;
    font-weight: 400;
    line-height: 1.6;
}

.disclaimer-consent-modal .form-group b a {
    color: #121212;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.disclaimer-consent-modal #spndiscaccept {
    grid-column: 2;
    min-height: 18px;
    margin: 2px 0 0;
    font-size: 13px;
}

.disclaimer-consent-modal #mc-submit {
    width: 100%;
    min-height: 50px;
    padding: 13px 24px;
    border: 0;
    border-radius: 999px;
    background: #121212;
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-transform: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.disclaimer-consent-modal #mc-submit:hover {
    background: #000;
    transform: translateY(-1px);
}

.disclaimer-consent-modal #mc-submit:disabled {
    cursor: not-allowed;
    background: #d7d7d7;
    color: #777;
    transform: none;
    opacity: 1;
}

@media (max-width: 575px) {
    .disclaimer-consent-modal .modal-dialog {
        padding: 8px;
        margin: 8px auto;
    }

    .disclaimer-consent-modal .offer-content > div {
        padding: 24px 20px;
    }

    .disclaimer-consent-modal .offer-content > div::before {
        font-size: 22px;
    }

    .disclaimer-consent-modal .close {
        top: 18px !important;
        right: 18px !important;
    }
}

/* API-loaded disclaimer displayed inside the consent modal */
.disclaimer-consent-modal .hot-sauce-disclaimer-panel {
    max-height: 260px;
    padding: 18px;
    margin: 0 0 18px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    background: #fff;
    color: #605f5f;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.65;
    text-align: left;
    scrollbar-width: thin;
    scrollbar-color: #bdbdbd #f4f4f4;
}

.disclaimer-consent-modal .hot-sauce-disclaimer-panel::-webkit-scrollbar {
    width: 7px;
}

.disclaimer-consent-modal .hot-sauce-disclaimer-panel::-webkit-scrollbar-track {
    border-radius: 7px;
    background: #f4f4f4;
}

.disclaimer-consent-modal .hot-sauce-disclaimer-panel::-webkit-scrollbar-thumb {
    border-radius: 7px;
    background: #bdbdbd;
}

.disclaimer-consent-modal .hot-sauce-disclaimer-panel h1,
.disclaimer-consent-modal .hot-sauce-disclaimer-panel h2,
.disclaimer-consent-modal .hot-sauce-disclaimer-panel h3,
.disclaimer-consent-modal .hot-sauce-disclaimer-panel h4 {
    margin: 18px 0 8px;
    color: #121212;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    line-height: 1.35;
}

.disclaimer-consent-modal .hot-sauce-disclaimer-panel > :first-child {
    margin-top: 0;
}

.disclaimer-consent-modal .hot-sauce-disclaimer-panel > :last-child {
    margin-bottom: 0;
}

.disclaimer-consent-modal .hot-sauce-disclaimer-loading {
    margin: 0;
    color: #605f5f;
}

@media (max-width: 575px) {
    .disclaimer-consent-modal .hot-sauce-disclaimer-panel {
        max-height: 220px;
        padding: 15px;
        font-size: 13px;
    }
}