/*
 * Type overrides. bootstrap.min.css loads after style.css and its own
 * `body { font-family: var(--bs-body-font-family) }` wins on order, so the
 * Bootstrap variable is pointed at our body face rather than fought with.
 */
:root {
    --bs-body-font-family: var(--hebd-font-body);
    --bs-body-color: var(--hebd-text);
    --bs-body-bg: var(--hebd-bg);
}

body {
    font-family: var(--hebd-font-body);
    color: var(--hebd-text);
    background-color: var(--hebd-bg);
}

/*
 * Wide container. Bootstrap stops .container at 1320px; from laptop width up
 * the site now uses the available width up to 1920px, with gutters that grow
 * with the viewport so content never runs edge to edge. Below 1200px Bootstrap's
 * own breakpoints are untouched.
 */
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    max-width: var(--hebd-container-max);
    padding-inline: var(--hebd-gutter);
}

/*
 * The site container.
 *
 * One width and one gutter for every primary content area, so the header, the
 * page and the footer start and end on the same vertical lines at every
 * viewport. Backgrounds stay full bleed; only what sits inside them is
 * aligned. Bootstrap's own .container* classes above resolve to the same two
 * values, so both spellings mean the same thing.
 */
.hebd-site-container,
header .main-navbar .desktop-menu,
header .shop-nav__inner,
footer .footer-container .footer-content {
    max-width: var(--hebd-container-max);
    margin-inline: auto;
    padding-inline: var(--hebd-gutter);
}

/* These rows carry the container themselves, so their wrapper adds no gutter
   of its own. */
header .main-navbar>.container-fluid,
footer .footer-container>.container-fluid {
    padding-inline: 0;
}

/*
 * Elementor guard. Nested containers given a percentage width are laid out as
 * flex: 0 0 auto, so a row of four 25% columns plus the container gap is wider
 * than its parent and scrolls the page sideways. Letting them shrink only takes
 * effect when they would overflow; rows that fit are unchanged.
 */
.e-con.e-flex>.e-con-full {
    flex-shrink: 1;
}

/* Long-form reading layouts keep a readable measure inside the wider container. */
@media (min-width: 1200px) {

    /* The page aligns with the site; the article itself keeps a readable
       measure inside it. */
    #single-blog .ghee-text {
        max-width: 1100px;
        margin-inline: auto;
    }
}

/*
 * The product page uses the site container, so the breadcrumb, the product
 * itself, the description and the related products all line up with the
 * header and footer rather than sitting in a narrower column of their own.
 */
@media (min-width: 1200px) {

    /* A little more room for the buy controls than for the gallery. */
    #product-section .product-content-wrapper>.product-images {
        flex: 0 0 46%;
        max-width: 46%;
    }

    #product-section .product-content-wrapper>.product-summary {
        flex: 0 0 54%;
        max-width: 54%;
    }

    /* The description fills the panel; only the short description beside the
       product keeps a narrow measure. */
    #product-section .product-content-wrapper .product-summary .product-short-description {
        max-width: 80ch;
    }
}

/* Header CSS */
header .top-bar {
    background-color: var(--tertiary-color);
    padding: 10px 0;
}

header .top-bar-text {
    color: var(--theme-white);
    font-family: var(--hebd-font-body);
    font-size: 12px;
    font-weight: 300;
}

header .main-navbar {
    width: 100%;
    background: var(--theme-white);
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

/*
 * Desktop only: the category row (Shop by Category and the page links) stays
 * in view while the page scrolls. The header as a whole is the sticky
 * element, with a negative top equal to everything above that row (the
 * shipping strip and the logo/search row), so those scroll away and the row
 * pins to the top. Sticky keeps the header's place in the page, so nothing
 * jumps when it pins. Tablets and phones (1024px and below) scroll normally.
 */
@media (min-width: 1025px) {
    :root {
        --hebd-topbar-h: 34px;
        /* Shipping strip + logo/search row, the part that scrolls away. It
           stops 10px short, so the "New" badge that sits over the row's top
           edge is not cut off. */
        --hebd-header-scroll-away: 100px;
        /* The pinned category row, which other sticky elements clear. */
        --hebd-header-stuck-h: 59px;
    }

    body > header {
        position: sticky;
        top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--hebd-header-scroll-away));
        z-index: 1020;
    }

    header .top-bar {
        display: flex;
        align-items: center;
        height: var(--hebd-topbar-h);
        padding: 0;
        overflow: hidden;
    }

    header .top-bar .top-bar-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Pinned: the strip of the logo row left above the category row is
       blanked (main.js sets .is-pinned), leaving only its background. */
    body > header.is-pinned .main-navbar .desktop-menu {
        visibility: hidden;
    }

    /* The cart and account drawers are inside the header. While one is open
       the header sits above Bootstrap's backdrop, or the drawer would be
       dimmed along with the page. */
    body:has(.offcanvas.show, .offcanvas.showing, .offcanvas.hiding) > header {
        z-index: 1046;
    }
}

/* The logo/search row is taller up to 1220px (responsive.css). */
@media (min-width: 1025px) and (max-width: 1220px) {
    :root {
        --hebd-header-scroll-away: 124px;
    }
}

header .main-navbar .desktop-menu .main-logo {
    width: 118px;
    height: 70px;
}

header .main-navbar .desktop-menu .main-logo img {
    height: 100%;
    width: 100%;
}

header .main-navbar .mobile-menu .main-logo {
    margin-right: 30px;
}

header .main-navbar .mobile-menu .main-logo .small-logo {
    width: 84px;
    height: 50px;
}

header .main-navbar a svg {
    color: #000;
}

header .main-navbar .desktop-menu {
    padding-block: 0;
}

header.sticky .main-navbar .nav-left .main-logo {
    width: 84px;
    height: 50px;
}

header .shop-nav ul.main-menu {
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 28px;
}

header .shop-nav ul.main-menu li {
    position: relative;
}

header .shop-nav ul.main-menu li.new-box-tag span.menu-label.menu-label-secondary {
    left: calc(100% - 30px);
    position: absolute;
    bottom: 85%;
    z-index: 1;
}

header li.new-box-tag span.menu-label.menu-label-secondary {
    margin-left: 0;
    display: inline-block;
    margin-inline-start: -20px;
    padding: 2px 4px;
    border-radius: calc(0 / 1.5);
    background-color: rgb(243, 189, 36);
    color: #fff;
    vertical-align: middle;
    text-transform: uppercase;
    white-space: nowrap;
    font-weight: 600;
    font-size: 9px;
    line-height: 12px;
}

header #menuTabsContent ul li {
    text-transform: uppercase;
}

header .shop-nav ul.main-menu li.new-box-tag span.menu-label.menu-label-secondary:before {
    content: "";
    position: absolute;
    top: 100%;
    inset-inline-start: 10px;
    border: 4px solid rgb(243, 189, 36);
    border-bottom-color: transparent !important;
    border-inline-end-color: transparent !important;
    border-inline-end-width: 7px;
    border-inline-start-width: 0;
}

header .shop-nav ul.main-menu li a {
    text-decoration: none;
    color: #000;
    font-family: var(--hebd-font-body);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    font-style: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    padding: 14px 0;
    display: inline-block;
}

header .shop-nav ul.main-menu li:hover>a,
header .shop-nav ul.main-menu li.current_page_item a {
    color: rgba(51, 51, 51, 0.7) !important;
}

header .shop-nav ul.main-menu li:hover>a::before,
header .shop-nav ul.main-menu li.current_page_item a::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
    animation: menuanimation 0.4s ease-in-out;
}

@keyframes menuanimation {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

header .shop-nav ul.main-menu li.have-sub-menu {
    position: relative;
}

header .shop-nav ul.main-menu li.have-sub-menu a::after {
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    border-right: 0.3em solid transparent;
    border-top: 0.3em solid;
    content: "";
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
}

header .shop-nav ul.main-menu li.have-sub-menu ul.sub-menu {
    display: none;
    padding-left: 0;
    list-style: none;
    position: absolute;
    top: 59px;
    left: 0;
    width: 200px;
    background-color: var(--theme-white);
}

header .shop-nav ul.main-menu li.have-sub-menu:hover ul.sub-menu {
    display: block;
}

header .shop-nav ul.main-menu li.have-sub-menu ul.sub-menu li {
    margin-right: 0;
    padding: 10px;
}

header .shop-nav ul.main-menu li.have-sub-menu ul.sub-menu li a {
    padding: 10px;
}

header .shop-nav ul.main-menu li.have-sub-menu ul.sub-menu li a::after {
    display: none;
}

header .main-navbar .desktop-menu .nav-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /* Row one is logo + search + actions, so the search takes the free width. */
    flex: 1 1 auto;
    gap: 6px;
}

header .main-navbar .desktop-menu .nav-right .search-section {
    flex: 1 1 auto;
    max-width: 560px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 20px;
}

header .main-navbar .desktop-menu .nav-right .search-section .search-bar {
    width: 100%;
    max-width: 531px;
    position: relative;
}

header .main-navbar .desktop-menu .nav-right .search-section .search-bar .form-group {
    position: relative;
    width: 100%;
}

header .main-navbar .desktop-menu .nav-right .search-section .search-bar .form-group .search-input {
    width: 100%;
    padding: 10px 40px 10px 10px;
    font-size: 16px;
    border: 2px solid #296C43;
    border-radius: 5px;
    outline: none;
    position: relative;
    background-color: #fff;
}

header .main-navbar .desktop-menu .nav-right .search-section .search-bar .form-group .search-input:focus {
    border: 2px solid gainsboro;
}

header .main-navbar .desktop-menu .nav-right .search-section .search-bar .form-group .search-input::placeholder {
    font-family: var(--hebd-font-body);
    font-size: 16px;
}

header .main-navbar .desktop-menu .nav-right .search-section .search-bar .form-group .search-btn {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
}

header .main-navbar .desktop-menu .nav-right .search-bar .form-floating label::after {
    background: transparent;
}

header .main-navbar .mobile-menu {
    display: none;
}

/* ------------------------------------------------------------------ */
/* Shop row. Category browsing sits directly under the search, ahead of
   the standard pages, so products are the first thing a customer can
   reach. Categories come from the shop taxonomy, never a hardcoded list. */
/* ------------------------------------------------------------------ */

header .shop-nav {
    border-top: 1px solid var(--hebd-line);
    background: var(--hebd-bg);
}

header .shop-nav__inner {
    display: flex;
    align-items: center;
    gap: 32px;
}

header .shop-nav__categories {
    position: relative;
}

header .shop-nav__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 14px 0;
    border: 0;
    background: none;
    color: var(--hebd-primary);
    font-family: var(--hebd-font-body);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}

header .shop-nav__chevron {
    transition: transform .18s ease;
}

header .shop-nav__trigger[aria-expanded="true"] .shop-nav__chevron {
    transform: rotate(180deg);
}

header .shop-nav__panel {
    position: absolute;
    top: 100%;
    left: -16px;
    z-index: 30;
    width: max-content;
    max-width: min(1100px, calc(100vw - 100px));
    padding: 22px 26px 18px;
    border: 1px solid var(--hebd-line);
    border-radius: 14px;
    background: var(--hebd-surface);
    box-shadow: var(--hebd-shadow-card-hover);
}

header .shop-nav__panel[hidden] {
    display: none;
}

header .shop-nav__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(190px, 1fr));
    gap: 4px 34px;
    margin: 0;
    padding: 0;
    list-style: none;
}

header .shop-nav__category {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
}

header .shop-nav__category:hover,
header .shop-nav__category:focus-visible {
    background: var(--hebd-soft-tint);
}

header .shop-nav__name {
    color: var(--hebd-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

header .shop-nav__count {
    color: var(--hebd-text-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

header .shop-nav__children {
    margin: 0 0 6px;
    padding: 0 0 0 10px;
    list-style: none;
}

header .shop-nav__children a {
    display: block;
    padding: 4px 0;
    color: var(--hebd-text-muted);
    font-size: 13px;
    text-decoration: none;
}

header .shop-nav__children a:hover {
    color: var(--hebd-primary);
}

header .shop-nav__all {
    display: inline-block;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--hebd-line);
    width: 100%;
    color: var(--hebd-primary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

header .shop-nav__all:hover {
    color: var(--hebd-primary-dark);
}

/* Keyboard users need to see where they are in the header. */
header .shop-nav__trigger:focus-visible,
header .shop-nav ul.main-menu li a:focus-visible,
header .main-navbar .nav-right a:focus-visible,
header .main-navbar .nav-right button:focus-visible {
    outline: 2px solid var(--hebd-primary);
    outline-offset: 3px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    header .shop-nav__chevron {
        transition: none;
    }
}

/* ---- Mobile navigation ---- */

#mobileMenuOffcanvas .mobile-search {
    position: relative;
}

#mobileMenuOffcanvas .mobile-search .form-control {
    padding-right: 44px;
}

#mobileMenuOffcanvas .mobile-search__btn {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    padding: 0;
    border: 0;
    background: none;
    color: var(--hebd-primary);
    display: flex;
    align-items: center;
}

#mobileMenuOffcanvas .mobile-categories__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

#mobileMenuOffcanvas .mobile-categories__item>a {
    flex: 1 1 auto;
}

#mobileMenuOffcanvas .mobile-categories__toggle {
    flex: 0 0 auto;
    padding: 8px;
    border: 0;
    background: none;
    color: var(--hebd-text-muted);
    line-height: 0;
}

#mobileMenuOffcanvas .mobile-categories__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

#mobileMenuOffcanvas .mobile-categories__children {
    flex: 1 1 100%;
    margin: 0 0 6px;
    padding-left: 16px;
    list-style: none;
}

#mobileMenuOffcanvas .mobile-categories__children[hidden] {
    display: none;
}

#mobileMenuOffcanvas .mobile-categories__item--all a {
    color: var(--hebd-primary);
    font-weight: 600;
}

/* Account, Wishlist and Cart: three equal tiles, icon over label, the same
   shortcuts the desktop header shows. */
#mobileMenuOffcanvas .mobile-account-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--hebd-line);
    list-style: none;
}

#mobileMenuOffcanvas .mobile-account-links__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 72px;
    padding: 12px 6px;
    border: 1px solid var(--hebd-line);
    border-radius: 12px;
    background: var(--hebd-surface);
    color: var(--hebd-text);
    font-family: var(--hebd-font-body);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
}

#mobileMenuOffcanvas .mobile-account-links__item:hover,
#mobileMenuOffcanvas .mobile-account-links__item:focus-visible {
    border-color: var(--hebd-primary);
    color: var(--hebd-primary);
}

#mobileMenuOffcanvas .mobile-account-links__item:focus-visible {
    outline: 2px solid var(--hebd-primary);
    outline-offset: 2px;
}

#mobileMenuOffcanvas .mobile-account-links__item svg {
    display: block;
    color: var(--hebd-primary);
}

#mobileMenuOffcanvas .mobile-account-links__icon {
    position: relative;
    display: block;
}

/* Item count on the cart icon; hidden while the cart is empty. */
#mobileMenuOffcanvas .mobile-account-links__badge {
    position: absolute;
    top: -7px;
    right: -11px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 2px solid var(--hebd-surface);
    border-radius: 999px;
    background: var(--hebd-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
}

#mobileMenuOffcanvas .mobile-account-links__badge:has(.hebd-cart-count.is-empty) {
    display: none;
}

/* ---- Signed-in customer ---- */

/*
 * Signed in, every account entry point swaps its outline icon for the
 * customer's initial and name, so it is obvious at a glance who is signed in.
 * The small bright dot is the "signed in" mark.
 */
.hebd-avatar {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--hebd-primary);
    color: #fff;
    font-family: var(--hebd-font-heading);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.hebd-avatar::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--hebd-primary-bright);
}

.hebd-avatar--sm {
    width: 26px;
    height: 26px;
    font-size: 12px;
}

.hebd-avatar--sm::after {
    width: 9px;
    height: 9px;
}

header .main-navbar .desktop-menu .nav-right .user.is-signed-in .btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 4px 12px 4px 4px;
    border: 1px solid var(--hebd-line);
    border-radius: 999px;
    background: var(--hebd-surface);
    text-align: left;
    transition: border-color .2s ease;
}

header .main-navbar .desktop-menu .nav-right .user.is-signed-in .btn:hover {
    border-color: var(--hebd-primary);
}

.hebd-account-greeting {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.hebd-account-greeting small {
    font-family: var(--hebd-font-body);
    font-size: 11px;
    color: var(--hebd-text-muted);
}

.hebd-account-greeting strong {
    max-width: 110px;
    overflow: hidden;
    font-family: var(--hebd-font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--hebd-primary-dark);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mobile menu tile and bottom bar: initial above a name that never overflows. */
.hebd-account-name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mobileMenuOffcanvas .mobile-account-links__item.is-signed-in {
    border-color: var(--hebd-primary);
    color: var(--hebd-primary-dark);
}

.bottom-nav .nav-items.is-signed-in {
    min-width: 0;
    color: var(--hebd-primary-dark);
}

/* Same height as the 24px icons (plus their 4px gap) next to it. */
.bottom-nav .nav-items.is-signed-in .hebd-avatar {
    margin-bottom: 2px;
}

#userAuthOffcanvas .login-container {
    max-width: auto;
    margin: 10px auto;
    padding: 10px;
    background-color: var(--theme-white);
    border-radius: 8px;
}

#userAuthOffcanvas .form-label {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: rgb(36, 36, 36);
    margin-bottom: 0.5rem;
}

#userAuthOffcanvas .required::after {
    content: " *";
    color: red;
}

#userAuthOffcanvas .password-field {
    position: relative;
}

#userAuthOffcanvas .password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: var(--light-grey);
    cursor: pointer;
    padding: 0.25rem;
}

#userAuthOffcanvas .btn-login {
    background-color: var(--primary-color);
    border: none;
    width: 100%;
    padding: 0.75rem;
    font-size: 0.9rem;
    margin: 1rem 0;
    transition: background-color 0.3s ease;
}

#userAuthOffcanvas .btn-login:hover {
    background-color: var(--primary-color);
}

#userAuthOffcanvas .form-check {
    margin: 1rem 0;
}

#userAuthOffcanvas .form-check-label {
    font-size: 0.9rem;
    color: var(--theme-gray);
}

#userAuthOffcanvas .form-check-input {
    margin-top: 0.25rem;
}

#userAuthOffcanvas .forgot-password {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.9rem;
    float: right;
}

#userAuthOffcanvas .forgot-password:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

#userAuthOffcanvas .avatar-section {
    text-align: center;
    margin: 2rem 0;
}

#userAuthOffcanvas .avatar-icon {
    width: 60px;
    height: 60px;
    background-color: var(--besics-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

#userAuthOffcanvas .avatar-icon i {
    font-size: 2rem;
    color: var(--theme-gray);
}

#userAuthOffcanvas .no-account {
    text-align: center;
    color: var(--besic-grey);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

#userAuthOffcanvas .create-account {
    color: rgb(36, 36, 36);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    display: block;
    text-align: center;
}

#userAuthOffcanvas .create-account:hover {
    color: var(--primary-color);
}


/* Mobile Menu css*/

#mobileMenuOffcanvas .nav-tabs {
    border-bottom: 1px solid var(--theme-gray);
}

#mobileMenuOffcanvas .nav-tabs .nav-link {
    color: var(--light-grey);
    border: none;
    padding: 1rem;
    flex: 1;
    text-align: center;
}

#mobileMenuOffcanvas .nav-tabs .nav-link.active {
    color: var(--deeper-green);
    border-bottom: 2px solid #059669;
}

#mobileMenuOffcanvas ul.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#mobileMenuOffcanvas ul.menu-list li {
    border-bottom: 1px solid var(--theme-gray);
}

#mobileMenuOffcanvas ul.menu-list a {
    display: block;
    padding: 1rem;
    color: var(--deepest-grey);
    text-decoration: none;
}

#mobileMenuOffcanvas .new-badge {
    background: #fff3e6;
    color: var(--light-red);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
}

#mobileMenuOffcanvas #searchInput {
    padding-right: 40px;
}

.empty-cart-content {
    text-align: center;
    padding: 3rem 1rem;
}

#cartOffCanvas .cart-icon {
    font-size: 3rem;
    color: var(--theme-gray);
    margin-bottom: 1rem;
}

#cartOffCanvas .empty-message {
    color: var(--besic-grey);
    margin-bottom: 2rem;
}

#cartOffCanvas .return-shop-btn {
    background: var(--deeper-green);
    border-color: var(--deeper-green);
    padding: 0.75rem 2rem;
    font-size: 0.875rem;
}

#cartOffCanvas .return-shop-btn:hover {
    background: var(--light-green);
    border-color: var(--light-green);
}

/* footer css start  */
footer .footer-container {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
}

footer .footer-container .footer-content {
    padding-block: 80px;
}

footer .footer-menu li {
    margin-top: .5rem !important;
    margin-bottom: .5rem !important;
}

footer .footer-menu li::marker {
    content: "➤ ";
    color: #fff;
}

footer .footer-menu li a {
    text-decoration: none;
}

footer .footer-menu li a,
footer .footer-text {
    color: rgb(255, 255, 255);
    font-family: var(--hebd-font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
}

/* The contact column is a flex item, so the unbroken email address set its
   minimum width and pushed it past a narrow tablet column. Let it shrink and
   wrap instead. */
footer .footer-contact {
    min-width: 0;
    overflow-wrap: anywhere;
}

footer .footer-container .footer-content img {
    width: 70%;
    height: auto;
}

footer .footer-container .footer-content hr {
    border: 1px solid #F2BD22;
}


/* Breadcrumb CSS */

#breadcrumb {
    /* Was a fixed 200px with a 78px heading, which a category or search title
       overflowed on a phone. The band now grows with its heading. */
    min-height: clamp(120px, 14vw, 200px);
    width: 100%;
    padding-block: 24px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#breadcrumb .breadcrumb-content {
    max-width: var(--hebd-container-max);
    padding-inline: var(--hebd-gutter);
    text-align: center;
}

#breadcrumb .breadcrumb-content .banner-header {
    font-size: clamp(28px, 4.6vw, 62px);
    font-weight: 600;
    line-height: 1.2;
    font-family: var(--hebd-font-heading);
    overflow-wrap: anywhere;
}

#breadcrumb .breadcrumb-content .banner-home {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    font-family: var(--hebd-font-body);
}

#breadcrumb .breadcrumb-content .banner-store {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    font-family: var(--hebd-font-body);
}

/* WooCommerce's trail (single product, category archives): the same size as
   the banner trail. The links read muted; the current page, the plain text
   at the end, reads darker and stronger. */
.woocommerce .woocommerce-breadcrumb,
.woocommerce-breadcrumb {
    font-family: var(--hebd-font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--hebd-text);
}

.woocommerce .woocommerce-breadcrumb a,
.woocommerce-breadcrumb a {
    font-weight: 400;
    color: var(--hebd-text-muted);
}

@media (max-width: 767.98px) {
    #breadcrumb .breadcrumb-content .banner-home,
    #breadcrumb .breadcrumb-content .banner-store,
    .woocommerce .woocommerce-breadcrumb,
    .woocommerce-breadcrumb {
        font-size: 14px;
    }
}

/* Blog Section CSS */

#blog-section nav ul.pagination li.active .page-link.current {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

#blog-section nav ul.pagination li a {
    color: var(--primary-color);
}

#blog-section nav ul.pagination li a:focus {
    box-shadow: none !important;
}

#blog-section .blog-content .blog-card {
    background: white;
    margin-bottom: 30px;
}

#blog-section .blog-content .blog-card .card-img-wrapper {
    overflow: hidden;
    position: relative;
    height: 250px;
}

#blog-section .blog-content .blog-card .card-img-wrapper .card-img-top {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

#blog-section .blog-content .blog-card:hover .image-overlay {
    opacity: 1;
}

#blog-section .blog-content .blog-card:hover .dots {
    opacity: 1;
    transform: translateY(0);
}

#blog-section .blog-content .blog-card:hover .card-img-top {
    transform: scale(1.05);
}

#blog-section .blog-content .blog-card .card-img-wrapper .date-stamp {
    position: absolute;
    top: 20px;
    left: 20px;
    background: white;
    padding: 8px 15px;
    text-align: center;
    line-height: 1.2;
    z-index: 1;
}

#blog-section .blog-content .blog-card .card-img-wrapper .date-stamp .date-month {
    font-size: 12px;
    font-family: var(--hebd-font-body);
    line-height: 24px;
    font-weight: 400;
    text-transform: uppercase;
}

#blog-section .category-tag {
    background: var(--primary-color);
    color: white;
    padding: 2px 12px;
    font-size: 12px;
    text-transform: uppercase;
    padding: 8px;
}

#blog-section .blog-content .blog-card .card-body {
    padding: 20px;
}

#blog-section .blog-content .blog-card .card-body .card-title {
    font-size: 24px;
    font-weight: 500;
    font-family: var(--hebd-font-heading);
    line-height: 33px;
    color: rgb(51, 51, 51);
}

#blog-section .blog-content .blog-card .card-body .icons {
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    font-family: var(--hebd-font-body);
    color: rgb(187, 187, 187);
    width: 220px;
    margin: 0 auto;
}

#blog-section .blog-content .blog-card .card-body .card-text {
    color: rgb(119, 119, 119);
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
}

/* Slider Products Section CSS */

/*
 * Section heading badge ("MOST LOVED PRODUCTS" / "SPECIAL PRODUCTS").
 *
 * The markup only carries .img-fluid, which caps at the container width, so a
 * large upload stretched across the full 1296px row. Cap it at the size the
 * original badge artwork rendered at (317px wide) and never upscale a smaller
 * one, so the heading stays the same size whatever gets uploaded.
 *
 * Qualified with div. because Elementor's `.elementor img { max-width: 100% }`
 * has the same specificity as `.loved-product img` and loads later.
 */
.loved-product__title {
    margin: 0 0 18px;
    font-family: var(--hebd-font-heading);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
    color: #333333;
}

/* With no image the title is the whole heading, so it carries the spacing. */
.loved-product__title:last-child {
    margin-bottom: 0;
}

div.loved-product img {
    width: auto;
    max-width: min(317px, 100%);
    height: auto;
}

/*
 * Homepage section rhythm. Every product band uses the same three steps:
 * space around the section, space under its heading, and a short step to the
 * dots and the See All button. Before this, three separate 48px utility
 * margins stacked up and left a near-empty screen between two carousels.
 */
.home-product-card-section {
    padding-block: var(--hebd-section-space);
}

.home-product-card-section .loved-product {
    margin-bottom: var(--hebd-heading-space);
}

/* The dots sit in the flow; they were absolutely positioned over the margin
   that has just been removed. */
.slider-products .swiper-pagination,
.slider-products .swiper-horizontal>.swiper-pagination-bullets {
    position: static;
    margin-top: var(--hebd-control-space);
}

.home-product-card-section .btn-box {
    margin-top: var(--hebd-control-space);
}

/*
 * Product card, shared by the homepage carousels (Most Loved Products widget)
 * and related products. Square image on a soft panel, a light surface, a soft
 * low-opacity shadow that strengthens slightly on hover.
 */
.slider-products .swiper {
    /* Room for the card shadow, which the carousel's overflow would clip. */
    padding-block: 8px 20px;
}

.hebd-product-card {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid var(--hebd-line);
    background: var(--hebd-surface);
    box-shadow: var(--hebd-shadow-card);
    position: relative;
    text-align: center;
    transition: box-shadow .22s ease, border-color .22s ease;
}

.hebd-product-card:hover {
    box-shadow: var(--hebd-shadow-card-hover);
    border-color: #DCD2C3;
}

.hebd-product-card .card-img {
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: var(--hebd-soft-tint);
}

.hebd-product-card .card-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    transition: transform .4s ease;
}

.hebd-product-card:hover .card-img img {
    transform: scale(1.03);
}

/* Badges stack in the image's top-left corner. The card's own 12px padding is
   part of the offset, so the group sits ~13px inside the image on every side
   and the badges never touch each other or the image edge. */
.hebd-product-card .extra-info-box {
    position: absolute;
    top: 25px;
    left: 25px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}

.hebd-product-card .new-badge {
    background-color: var(--hebd-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    padding: 3px 10px;
    border-radius: 20px;
}

/* Store CSS */

/* The store grid, archives, search and the wishlist all render the shared
   .hebd-product-card above, so they need no card rules of their own. The
   old #store-option-section filter styles went with the store rewrite. */

/* Cards fill their column so every card in a row is the same height. */
.store-product-grid>[class*="col-"] {
    display: flex;
}

.store-product-grid .hebd-product-card {
    width: 100%;
}

/* Category archives and search results share the store's rhythm. */
.hebd-archive {
    padding-block: var(--hebd-section-space);
}

/* A search that finds nothing still offers a way forward. */
.hebd-archive-empty {
    max-width: 560px;
    margin: 0 auto;
    padding: 48px 20px 56px;
    text-align: center;
}

.hebd-archive-empty h2 {
    margin: 0 0 8px;
    font-family: var(--hebd-font-heading);
    font-size: 24px;
    font-weight: 600;
    color: var(--hebd-text);
}

.hebd-archive-empty p {
    margin: 0 0 20px;
    color: var(--hebd-text-muted);
    font-size: 15px;
}

.hebd-archive-empty__search {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 14px;
}

.hebd-archive-empty__search input[type="search"] {
    flex: 1 1 auto;
    max-width: 320px;
    padding: 10px 14px;
    border: 1px solid var(--hebd-line);
    border-radius: 10px;
    background: var(--hebd-surface);
    font-family: var(--hebd-font-body);
    font-size: 15px;
}

.hebd-archive-empty__search button {
    padding: 10px 20px;
    border: 0;
    border-radius: 10px;
    background: var(--hebd-primary);
    color: #fff;
    font-family: var(--hebd-font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.hebd-archive-empty__all {
    color: var(--hebd-primary);
    font-size: 14px;
    font-weight: 600;
}

/* Single Blog CSS */

#single-blog .details-content .ghee-kitchen {
    display: inline-block;
    padding: 0px 10px;
    background: #2E7046;
    color: #FFF;
    font-family: var(--hebd-font-body);
    font-size: 12px;
    font-weight: 600;
    line-height: 25px;
}

/* The post title is the page's h1 for structure; its size is the one the
   blog was designed with. */
#single-blog .ghee-head,
#single-blog .details-content .ghee-head {
    font-family: var(--hebd-font-heading);
    font-size: 32px;
    font-weight: 500;
    line-height: 44px;
    color: rgb(51, 51, 51);
}

#single-blog .details-content .icons {
    margin-top: 15px;
    font-size: 14px;
    line-height: 22px;
    font-family: var(--hebd-font-body);
    color: rgb(165, 165, 165);
}

#single-blog .details-content .ghee-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#single-blog .details-content .icon-conainer .horizental-line svg {
    color: #bbb;
}

#single-blog .details-content .icon-conainer .horizental-line svg:hover {
    color: var(--primary-color);
}

#single-blog .details-content .text-large {
    font-size: 16px;
    line-height: 24px;
    font-family: var(--hebd-font-body);
    font-weight: 400;
    color: rgb(119, 119, 119);
}

#single-blog .details-content .text-bold {
    font-size: 14px;
    line-height: 22px;
    font-family: var(--hebd-font-body);
    font-weight: 600;
    color: rgb(119, 119, 119);
}

#single-blog .details-content .text-normal {
    font-size: 14px;
    line-height: 22px;
    font-family: var(--hebd-font-body);
    font-weight: 400;
    color: rgb(119, 119, 119);
}

/* form css  */
/* Comment Form CSS */

#single-blog .details-content .form-label,
#single-blog .details-content .privacy-notice {
    font-size: 14px;
    line-height: 22px;
    color: rgb(36, 36, 36);
    font-weight: 400;
    font-family: var(--hebd-font-body);
}


#single-blog .details-content .btn-comment {
    background-color: var(--primary-color);
    color: white;
    border: none;
    font-family: var(--hebd-font-body);
    padding: 0.5rem 1.3rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}

#single-blog .details-content .btn-comment:hover {
    background-color: #39ad7d;
    color: white;
}

#single-blog .details-content .ghee-text .icon-conainer .icon-content .tags-container .tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    font-size: 12px;
    color: #495057;
    font-weight: 600;
    line-height: 20px;
    font-family: var(--hebd-font-body);
    text-decoration: none;
    transition: all 0.2s ease;
}

#single-blog .ghee-text .icon-conainer .icon-content .tags-container .tag:hover {
    background-color: #e9ecef;
    border-color: #dee2e6;
}

#single-blog hr {
    color: rgb(51, 51, 51);
}

#single-blog .end-justice {
    width: 300px;
}

#single-blog .order {
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: rgb(187, 187, 187);
    font-family: var(--hebd-font-body);
}

#single-blog .achar {
    font-size: 12px;
    font-weight: 500;
    line-height: 17px;
    color: rgb(36, 36, 36);
    font-family: var(--hebd-font-heading);
}

#single-blog .horizental-line {
    border: 2px solid #E5E5E4;
    border-left: none;
    border-right: none;
}

#single-blog .btn-search {
    padding: 11px 27px;
    border-radius: 5px;
    background: #F3F3F3;
    border: none;
    color: rgb(62, 62, 62);
    font-family: var(--hebd-font-body);
    font-size: 13px;
    font-weight: 600;
    line-height: 17px;
    text-transform: uppercase;
}

#single-blog .right-bold {
    font-size: 24px;
    font-weight: 600;
    line-height: 31px;
    color: rgb(36, 36, 36);
    font-family: var(--hebd-font-heading);
}

#single-blog .right-normal {
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    color: rgb(118, 118, 118);
    font-family: var(--hebd-font-body);
    text-decoration: none;
    display: block;
    margin-top: 15px;
    margin-bottom: 5px;
}

#single-blog img {
    height: auto;
    width: 100%;
}

/* Single Product CSS */

#product-section .product-content-wrapper .product-images .woocommerce-product-gallery {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: row-reverse;
    position: relative;
}

/*
 * FlexSlider only wraps the gallery in .flex-viewport when a product has more
 * than one image. Most products here ship a single image, so the main stage is
 * defined for both cases: .flex-viewport when the slider runs, and the gallery
 * wrapper itself when it does not.
 */
#product-section .product-content-wrapper .product-images .woocommerce-product-gallery .flex-viewport,
#product-section .product-content-wrapper .product-images .woocommerce-product-gallery>.woocommerce-product-gallery__wrapper {
    flex: 1 1 auto;
    max-width: 500px;
    width: 100%;
    height: 500px;
    background-color: #f7f9f8;
    border-radius: 8px;
    overflow: hidden;
}

#product-section .product-content-wrapper .product-images .woocommerce-product-gallery .woocommerce-product-gallery__image a {
    display: block;
    width: 100%;
    height: 500px;
}

#product-section .product-content-wrapper .product-images .woocommerce-product-gallery .woocommerce-product-gallery__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

#product-section .product-content-wrapper .product-images .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs {
    width: 100px;
    max-height: 500px;
    height: auto;
    overflow-y: auto;
    scrollbar-width: none;
    margin: 0 15px 0 0;
    padding: 0;
    list-style: none;
    flex: 0 0 auto;
}

#product-section .product-content-wrapper .product-images .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li {
    width: 100%;
    height: 100px;
    margin-bottom: 10px;
}

#product-section .product-content-wrapper .product-images .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    background-color: #f7f9f8;
    border: 1px solid #e2e8e4;
    border-radius: 8px;
    cursor: pointer;
    opacity: .75;
    transition: opacity .18s ease, border-color .18s ease;
}

#product-section .product-content-wrapper .product-images .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li img:hover,
#product-section .product-content-wrapper .product-images .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li img.flex-active {
    opacity: 1;
    border-color: #136532;
}

/* Keep the zoom/lightbox trigger clear of the image itself. */
#product-section .product-content-wrapper .product-images .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
}

#product-section .product-content-wrapper .product-summary .product-title h1 {
    font-size: 34px;
    line-height: 1.2;
    word-wrap: break-word;
    font-weight: 500;
    color: #333333;
    font-family: var(--hebd-font-heading);
}

/* The price is what a shopper looks for after the name: large, dark brand
   green, with any regular price smaller, muted and struck through beside it. */
#product-section .product-content-wrapper .product-summary .product-price .price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    margin: 10px 0 20px;
    font-family: var(--hebd-font-body);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--hebd-primary-dark);
}

#product-section .product-content-wrapper .product-summary .product-price .price .amount,
#product-section .product-content-wrapper .product-summary .product-price .price ins {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-decoration: none;
    background: none;
}

#product-section .product-content-wrapper .product-summary .product-price .price del {
    order: 2;
    font-size: 18px;
    font-weight: 500;
    color: var(--hebd-text-muted);
    text-decoration: line-through;
    opacity: 1;
}

#product-section .product-content-wrapper .product-summary .product-price .price del .amount {
    color: inherit;
    font-weight: inherit;
}

/* Once the headline shows the chosen variation's price (cart.js), the copy
   WooCommerce prints inside the form would only repeat it. */
#product-section .variations_form.hebd-price-synced .woocommerce-variation-price {
    display: none;
}

#product-section .product-content-wrapper .product-summary .product-short-description {
    font-family: var(--hebd-font-body);
    font-size: 14px;
    line-height: 22.4px;
    font-weight: 400;
    color: RGB(119, 119, 119);
}

/* The size a shopper is buying is one of the most important things on the
   page, so the options are full-size controls rather than small chips. */
#product-section .product-content-wrapper .product-summary .get-product-now .variation-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#product-section .product-content-wrapper .product-summary .get-product-now .variation-wrapper button.variation-button {
    font-family: var(--hebd-font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    min-width: 84px;
    min-height: 44px;
    padding: 11px 22px;
    border: 1.5px solid var(--hebd-line);
    border-radius: 10px;
    background: var(--hebd-surface);
    color: var(--hebd-text);
    transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

#product-section .product-content-wrapper .product-summary .get-product-now .variation-wrapper button.variation-button:hover {
    border-color: var(--hebd-primary);
    color: var(--hebd-primary);
}

#product-section .product-content-wrapper .product-summary .get-product-now .variation-wrapper button.variation-button:focus-visible {
    outline: 2px solid var(--hebd-primary);
    outline-offset: 2px;
}

/* The picker marks the chosen option `selected` server-side and `active` once
   the script runs; both mean the same thing to a shopper. */
#product-section .product-content-wrapper .product-summary .get-product-now .variation-wrapper button.variation-button.active,
#product-section .product-content-wrapper .product-summary .get-product-now .variation-wrapper button.variation-button.selected {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 6px 16px -12px rgba(19, 101, 50, .9);
}

/* ---- Purchase area ---- */

/*
 * A long short-description used to push the price, options and Add to cart off
 * the first screen. The text stays in the markup; only its height is capped
 * until the shopper asks for the rest.
 */
#product-section .product-content-wrapper .product-summary .product-short-description.is-clamped {
    position: relative;
    max-height: 8.4em;
    overflow: hidden;
}

#product-section .product-content-wrapper .product-summary .product-short-description.is-clamped::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2.4em;
    background: linear-gradient(to bottom, rgba(250, 247, 242, 0), var(--hebd-bg));
    pointer-events: none;
}

#product-section .product-content-wrapper .product-summary .product-short-description__toggle {
    margin: 2px 0 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--hebd-primary);
    font-family: var(--hebd-font-body);
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

#product-section .product-content-wrapper .product-summary .stock {
    margin: 0 0 12px;
    font-family: var(--hebd-font-body);
    font-size: 14px;
    font-weight: 600;
}

#product-section .product-content-wrapper .product-summary .stock.in-stock {
    color: var(--hebd-primary);
}

#product-section .product-content-wrapper .product-summary .stock.out-of-stock {
    color: #A3312B;
}

/* The buy controls are the point of the page: give them room and a divider,
   and let the metadata underneath stay quiet. */
#product-section .product-content-wrapper .product-summary .get-product-now {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--hebd-line);
}

#product-section .product-content-wrapper .product-summary .other-info {
    color: var(--hebd-text-muted);
}

#product-section .product-content-wrapper .product-summary .get-product-now .single_add_to_cart_button {
    padding: 16px;
    height: 100%;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    background-color: #2E7046;
    display: block;
}

#product-section .product-content-wrapper .product-summary .get-product-now .single_add_to_cart_button:hover {
    background-color: #619E44;
}

#product-section .product-content-wrapper .product-summary .get-product-now .group-product .product-title,
#product-section .product-content-wrapper .product-summary .get-product-now .group-product .product-prices {
    color: #000;
    word-wrap: break-word;
    font-weight: 500;
    line-height: 1.4;
    font-size: 12px;
}

#product-section .product-content-wrapper .product-summary .get-product-now .group-product .product-btn a {
    padding: 8px 16px;
    background-color: #2E7046;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
}

#product-section .product-content-wrapper .product-summary .get-product-now .group-product .product-btn a:hover {
    background-color: #619E44;
}

#product-section .product-content-wrapper .product-summary .other-info .sku p,
#product-section .product-content-wrapper .product-summary .other-info .categories p,
#product-section .product-content-wrapper .product-summary .other-info .tags p,
#product-section .product-content-wrapper .product-summary .other-info .share {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    font-family: var(--hebd-font-body);
}

#product-section .product-content-wrapper .product-summary .other-info .share .social-medias a {
    margin-right: 10px;
}

#product-section .product-content-wrapper .product-summary .other-info .share .social-medias a:nth-last-child(1) {
    margin-right: 0;
}

#product-section .product-content-wrapper .product-summary .other-info .share svg {
    color: #818181;
    height: 14px;
    width: 14px;
}

#product-section .product-content-wrapper .product-summary .other-info .share svg:hover {
    color: #619E44;
}

#product-section .product-content-wrapper .product-summary .other-info .sku p a,
#product-section .product-content-wrapper .product-summary .other-info .categories p a,
#product-section .product-content-wrapper .product-summary .other-info .tags p a {
    color: rgb(119, 119, 119);
    text-decoration: none;
}

#product-section .product-content-wrapper .product-summary .other-info .sku p a:hover,
#product-section .product-content-wrapper .product-summary .other-info .categories p a:hover,
#product-section .product-content-wrapper .product-summary .other-info .tags p a:hover {
    color: #000;
}

#product-section #product-all-info .accordion-item .accordion-header .accordion-button:not(.collapsed) {
    background-color: transparent;
    color: #2E7046;
}

#product-section #product-all-info .accordion-item .accordion-header .accordion-button:focus {
    box-shadow: none;
}

#product-section #product-all-info .accordion-item {
    border-left: none;
    border-right: none;
}

#product-section #product-all-info .accordion-item .accordion-body h1,
#product-section #product-all-info .accordion-item .accordion-body h2,
#product-section #product-all-info .accordion-item .accordion-body h3,
#product-section #product-all-info .accordion-item .accordion-body h4,
#product-section #product-all-info .accordion-item .accordion-body h5,
#product-section #product-all-info .accordion-item .accordion-body h6 {
    font-family: var(--hebd-font-heading);
    font-size: 22px;
    font-weight: 600;
    color: rgb(36, 36, 36);
}

#product-section #product-all-info .accordion-item .accordion-body p,
#product-section #product-all-info .accordion-item .accordion-body ol li,
#product-section #product-all-info .accordion-item .accordion-body ul li {
    font-family: var(--hebd-font-body);
    font-size: 14px;
    font-weight: 400;
    color: rgb(119, 119, 119);
    line-height: 22.4px;
}

/*
 * WordPress editor content in the product description.
 *
 * The classic editor saves image placement as classes (alignleft, alignright,
 * aligncenter, alignnone) and captions as .wp-caption. The editor shows them
 * with WordPress's own editor styles, but the theme never defined them, so on
 * the page an image set to "align left" sat on its own line instead of having
 * the text beside it. These rules give the page the same placement.
 */
#product-section #product-all-info .accordion-body {
    /* Floated media stays inside the panel: the next tab and Related
       Products always start below the whole description. */
    display: flow-root;
}

#product-section #product-all-info .accordion-body img,
#product-section #product-all-info .accordion-body video,
#product-section #product-all-info .accordion-body iframe,
#product-section #product-all-info .accordion-body embed,
#product-section #product-all-info .accordion-body object {
    max-width: 100%;
}

/* The size chosen in the editor is kept; it only shrinks to fit. */
#product-section #product-all-info .accordion-body img {
    height: auto;
}

#product-section #product-all-info .accordion-body .alignleft {
    float: left;
    margin: 4px var(--hebd-heading-space) 16px 0;
}

#product-section #product-all-info .accordion-body .alignright {
    float: right;
    margin: 4px 0 16px var(--hebd-heading-space);
}

/* Beside text, a floated image never takes more than half the column. */
#product-section #product-all-info .accordion-body .alignleft,
#product-section #product-all-info .accordion-body .alignright {
    max-width: 50%;
}

#product-section #product-all-info .accordion-body .aligncenter {
    display: block;
    margin: 8px auto 16px;
}

#product-section #product-all-info .accordion-body .alignnone {
    margin: 8px 0 16px;
}

#product-section #product-all-info .accordion-body .wp-caption {
    max-width: 100%;
}

#product-section #product-all-info .accordion-body .wp-caption img {
    display: block;
    margin: 0;
}

#product-section #product-all-info .accordion-item .accordion-body .wp-caption-text,
#product-section #product-all-info .accordion-item .accordion-body figcaption {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--hebd-text-muted);
    text-align: center;
}

/* Lists keep their bullets and numbers (the global reset removes list
   indentation), and sit beside a floated image rather than under it. */
#product-section #product-all-info .accordion-body ul,
#product-section #product-all-info .accordion-body ol {
    display: flow-root;
    margin: 0 0 16px;
    padding-left: 1.4em;
}

#product-section #product-all-info .accordion-body ul {
    list-style: disc;
}

#product-section #product-all-info .accordion-body ol {
    list-style: decimal;
}

/* Phones: no room for text beside an image, so aligned media stacks,
   centred, at the full column width it can use. */
@media (max-width: 767.98px) {
    #product-section #product-all-info .accordion-body .alignleft,
    #product-section #product-all-info .accordion-body .alignright {
        float: none;
        display: block;
        max-width: 100%;
        margin: 8px auto 16px;
    }
}

#product-section .related-products {
    margin-top: 50px;
}

#product-section .related-products .swiper-card .card a.button {
    background-color: var(--primary-color);
    color: #fff;
}

/* Loop add-to-cart fills the card like the homepage card buttons. */
.related-products .hebd-card-cta a.button {
    display: block;
    width: 100%;
    margin: 0;
    text-align: center;
}

.related-products .hebd-card-cta a.added_to_cart {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    text-align: center;
}

#product-section .related-products .swiper-card .card a.button:hover {
    background: var(--secondery-color);
}

/* Cart CSS */
#cart-section form table thead tr th {
    font-family: var(--hebd-font-heading);
    font-size: 16px;
    font-weight: 600;
}

#cart-section form table tbody .product-thumbnail a img {
    width: 80px !important;
    display: block !important;
}

#cart-section form table tbody .product-name a {
    text-decoration: none;
    color: #777;
    font-family: var(--hebd-font-heading);
    font-weight: 500;
    font-size: 14px;
}

#cart-section form table tbody .product-name a:hover {
    color: #000;
}

#cart-section form table tbody .product-price span,
#cart-section form table tbody .product-subtotal span {
    font-family: var(--hebd-font-body);
    font-weight: 400;
    font-size: 14px;
}

#cart-section form table tbody .product-price span {
    color: #777777;
}

#cart-section form table tbody .product-subtotal span {
    color: var(--primary-color);
}

#cart-section form.woocommerce-cart-form table tbody tr td .mobile-title {
    display: none;
}

#cart-section form .mobile-products {
    display: none;
}

#cart-section .cart-collaterals {
    border: 2px solid rgba(0, 0, 0, 0.105);
}

#cart-section .cart-collaterals .cart_totals {
    float: none !important;
    width: 100%;
}

#cart-section .cart-collaterals .cart_totals h2 {
    text-transform: uppercase;
    font-size: 22px;
    line-height: 1.4;
    font-family: var(--hebd-font-heading);
    font-weight: 600;
    color: #242424;
    margin-bottom: 20px;
}

#cart-section .cart-collaterals .cart_totals table {
    border: none;
}

#cart-section .cart-collaterals .cart_totals table th {
    padding: 15px 10px;
    color: #242424;
    font-family: var(--hebd-font-heading);
    font-weight: 600;
    font-size: 14px;
}

#cart-section .cart-collaterals .cart_totals table td {
    text-align: end;
    color: #777;
    font-family: var(--hebd-font-heading);
    font-weight: 600;
    font-size: 14px;
}

#cart-section .cart-collaterals .cart_totals .woocommerce-shipping-totals ul#shipping_method li {
    display: flex;
    flex-direction: row-reverse;
    color: #777;
}

#cart-section .cart-collaterals .cart_totals .woocommerce-shipping-totals ul#shipping_method li input {
    margin-left: 10px;
}

#cart-section .cart-collaterals .cart_totals .woocommerce-shipping-totals ul#shipping_method li label span {
    color: var(--primary-color);
    font-size: 14px;
}

#cart-section .cart-collaterals .cart_totals .woocommerce-shipping-totals .woocommerce-shipping-calculator a.shipping-calculator-button {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 16px;
}

#cart-section .cart-collaterals .cart_totals .order-total .woocommerce-Price-amount.amount {
    color: var(--primary-color);
    font-size: 18.2px;
    font-weight: normal;
}

#cart-section .cart-collaterals .cart_totals .wc-proceed-to-checkout a {
    background-color: var(--primary-color);
    text-transform: uppercase;
    font-size: 14px;

}

#cart-section .cart-collaterals .cart_totals .wc-proceed-to-checkout a:hover {
    background-color: var(--secondery-color);
}

#cart-section .cart-collaterals .cart_totals #calc_shipping_city,
#cart-section .cart-collaterals .cart_totals #calc_shipping_postcode {
    border: 2px solid rgba(0, 0, 0, 0.1) !important;
}

#cart-section .cart-collaterals .cart_totals #calc_shipping_city,
.select2-search.select2-search--dropdown,
#cart-section .cart-collaterals .cart_totals #calc_shipping_postcode {
    padding: 10px;
}

#cart-section .cart-collaterals .cart_totals .woocommerce-shipping-calculator button.button {
    text-transform: uppercase;
    font-weight: 400;
}

.select2-container .select2-results ul li:hover,
.select2-container .select2-results ul li.select2-results__option.select2-results__option--highlighted {
    background: var(--primary-color);
}

.select2-container .select2-results ul li {
    font-size: 14px;
    color: #767676;
}

/* Checkout CSS */

#checkout-section .woocommerce-form-coupon-toggle .woocommerce-info {
    padding: 0;
    background: transparent;
    border: none;
    font-family: var(--hebd-font-body);
    font-size: 14px;
    line-height: 22.4px;
    font-weight: 600;
}

#checkout-section form.checkout_coupon.woocommerce-form-coupon {
    border: 2px solid rgba(0, 0, 0, 0.105);
    display: flex;
}

#checkout-section form.checkout_coupon.woocommerce-form-coupon .form-row-last button {
    padding: 13px;
    text-transform: uppercase;
    font-weight: 400;
    font-family: var(--hebd-font-body);
    font-size: 15px;
}

#checkout-section .woocommerce-form-coupon-toggle .woocommerce-info::before {
    display: none;
}

#checkout-section .woocommerce-form-coupon-toggle .woocommerce-info a {
    color: var(--primary-color);
}

#checkout-section form.checkout.woocommerce-checkout .woocommerce-billing-fields h3 {
    text-transform: uppercase;
    font-size: 22px;
    font-family: var(--hebd-font-heading);
    font-weight: 600;
    line-height: 30.8px;
}

/*
 * Checkout fields: dark text on white with a clear dark border, so every
 * field reads at a glance. Scoped to the checkout and its coupon form; other
 * forms on the site keep their own look.
 */
#checkout-section {
    --hebd-field-ink: #141414;
    --hebd-field-hint: #6B6B6B;
    --hebd-field-error: #B3261E;
}

#checkout-section form.checkout.woocommerce-checkout .form-row > label:not(.checkbox),
#checkout-section form.checkout_coupon .form-row > label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--hebd-font-body);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--hebd-field-ink);
}

#checkout-section form.checkout.woocommerce-checkout .form-row .input-text,
#checkout-section form.checkout.woocommerce-checkout .form-row select,
#checkout-section form.checkout.woocommerce-checkout .form-row textarea,
#checkout-section form.checkout_coupon .input-text {
    /* The site-wide .form-control rule (style.css) sets these with
       !important, so the checkout has to answer in kind. */
    width: 100%;
    min-height: 48px !important;
    padding: 11px 14px !important;
    font-family: var(--hebd-font-body);
    font-size: 16px !important;
    font-weight: 400;
    line-height: 1.4;
    color: var(--hebd-field-ink) !important;
    background-color: #fff !important;
    border: 1px solid var(--hebd-field-ink) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

#checkout-section form.checkout.woocommerce-checkout .form-row select {
    padding-right: 40px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23141414' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    appearance: none;
}

#checkout-section form.checkout.woocommerce-checkout .form-row .input-text::placeholder,
#checkout-section form.checkout.woocommerce-checkout .form-row textarea::placeholder,
#checkout-section form.checkout_coupon .input-text::placeholder {
    color: var(--hebd-field-hint);
    opacity: 1;
}

#checkout-section form.checkout.woocommerce-checkout .form-row .input-text:focus,
#checkout-section form.checkout.woocommerce-checkout .form-row select:focus,
#checkout-section form.checkout.woocommerce-checkout .form-row textarea:focus,
#checkout-section form.checkout_coupon .input-text:focus {
    border-color: var(--hebd-primary) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(46, 112, 70, .28) !important;
}

/* WooCommerce marks a field it rejected; the red border and message stay. */
#checkout-section form.checkout.woocommerce-checkout .form-row.woocommerce-invalid .input-text,
#checkout-section form.checkout.woocommerce-checkout .form-row.woocommerce-invalid select,
#checkout-section form.checkout.woocommerce-checkout .form-row.woocommerce-invalid textarea {
    border-color: var(--hebd-field-error) !important;
}

#checkout-section form.checkout.woocommerce-checkout .form-row.woocommerce-invalid .input-text:focus,
#checkout-section form.checkout.woocommerce-checkout .form-row.woocommerce-invalid select:focus,
#checkout-section form.checkout.woocommerce-checkout .form-row.woocommerce-invalid textarea:focus {
    box-shadow: 0 0 0 3px rgba(179, 38, 30, .22) !important;
}

#checkout-section .checkout-inline-error-message {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--hebd-field-error);
}

#checkout-section form.checkout.woocommerce-checkout .required {
    color: var(--hebd-field-error);
    text-decoration: none;
}

/* Country/state pickers when WooCommerce enhances them (more than one country). */
#checkout-section .select2-container--default .select2-selection--single {
    height: 48px;
    border: 1px solid var(--hebd-field-ink);
    border-radius: 8px;
}

#checkout-section .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 14px;
    font-size: 16px;
    line-height: 46px;
    color: var(--hebd-field-ink);
}

#checkout-section .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px;
    right: 8px;
}

#checkout-section .select2-container--default.select2-container--focus .select2-selection--single,
#checkout-section .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--hebd-primary);
    box-shadow: 0 0 0 3px rgba(46, 112, 70, .28);
}

/*
 * The checkout spans the same inner width as the header. On desktop the
 * customer details and the order summary are two equal columns with an even
 * gap, each in its own panel, so the page reads as one balanced piece. Below
 * 992px they stack.
 */
#checkout-section .hebd-checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    margin: 0;
}

/* The template's Bootstrap .mb-4 added 24px on top of the grid gap when the columns stack. */
#checkout-section .hebd-checkout-layout > .hebd-checkout-customer.mb-4 {
    margin-bottom: 0 !important;
}

#checkout-section .hebd-checkout-layout > .hebd-checkout-customer,
#checkout-section .hebd-checkout-layout > .hebd-checkout-review {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

#checkout-section .hebd-checkout-layout > .hebd-checkout-customer {
    padding: 28px 30px 12px;
    background: var(--hebd-surface, #FFFDF9);
    border: 1px solid var(--hebd-line, #E9E1D5);
    border-radius: 16px;
}

@media (min-width: 992px) {
    #checkout-section .hebd-checkout-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 40px;
        align-items: start;
    }

    /* Billing & Shipping stays in view beside the longer order column,
       just below the pinned category row (desktop header only). */
    #checkout-section .hebd-checkout-layout > .hebd-checkout-customer {
        position: sticky;
        top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--hebd-header-stuck-h, 0px) + 16px);
    }
}

@media (max-width: 575.98px) {
    #checkout-section .hebd-checkout-layout > .hebd-checkout-customer {
        padding: 22px 18px 8px;
    }
}

#checkout-section form.checkout.woocommerce-checkout #shipping_country_field .woocommerce-input-wrapper,
#checkout-section form.checkout.woocommerce-checkout #billing_country_field .woocommerce-input-wrapper {
    font-size: 14px !important;
    color: rgba(0, 0, 0, 0.5);
}

#checkout-section form.checkout.woocommerce-checkout #order_comments {
    height: 200px;
    padding: 15px;
}

#checkout-section form.checkout.woocommerce-checkout .order-history-box::after,
#checkout-section form.checkout.woocommerce-checkout .order-history-box::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    height: 10px;
    background-image: radial-gradient(farthest-side, transparent 6px, #f7f7f7 0);
    background-size: 15px 15px;
}

#checkout-section form.checkout.woocommerce-checkout .order-history-box::before {
    top: -10px;
    background-position: -2px -6px, 0 0;
}

#checkout-section form.checkout.woocommerce-checkout .order-history-box {
    position: relative;
    padding: 30px;
    background-color: #f7f7f7;
    border: none;
}

#checkout-section form.checkout.woocommerce-checkout .order-history-box::after {
    bottom: -10px;
    background-position: -2px 1px, 0 0;
}

#checkout-section form.checkout.woocommerce-checkout .order-history-box h4 {
    text-align: center;
    text-transform: uppercase;
    font-family: var(--hebd-font-heading);
    font-weight: 600;
    line-height: 1.4;
    font-size: 22px;
}

#checkout-section #order_review #checkout-table {
    border: none;
    background-color: #fff;
    padding: 5px 25px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
    table-layout: fixed;
    width: 100%;
}

#checkout-section #order_review #checkout-table th,
#checkout-section #order_review #checkout-table td {
    word-wrap: break-word;
}

#checkout-section #order_review #checkout-table thead tr th {
    text-transform: uppercase;
    font-size: 22px;
    font-weight: 600;
    font-family: var(--hebd-font-heading);
}

#checkout-section #order_review #checkout-table td.product-box {
    min-width: 100%;
    width: 400px;
}

#checkout-section #order_review #checkout-table td.product-box .btn.remove-checkout-item svg {
    height: 20px;
    width: 20px;
    color: #000;
}

#checkout-section #order_review #checkout-table td.product-box .btn.remove-checkout-item svg:hover {
    color: rgba(0, 0, 0, 0.5);
}

#checkout-section #order_review #checkout-table td.product-box .product-img {
    margin-left: 10px;
    margin-right: 10px;
    height: 60px !important;
    min-width: 60px !important;
}

#checkout-section #order_review #checkout-table td.product-box .product-img img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover;
    border-radius: 5px;
}

#checkout-section #order_review #checkout-table td.product-d-price,
#checkout-section #order_review #checkout-table .right {
    text-align: right;
}


#checkout-section #order_review #checkout-table td.product-box .product-info .product-mobile-price,
#checkout-section #order_review #checkout-table td.product-d-price,
#checkout-section #order_review #checkout-table td.product-box .product-info h6 {
    font-size: 17px;
    font-family: var(--hebd-font-heading);
    line-height: 20px;
    font-weight: 400;
    color: #777;
}

#checkout-section #order_review #checkout-table td.product-box .product-info h6 {
    color: #000;
}

#checkout-section #order_review #checkout-table td.product-box .product-info .product-mobile-price {
    display: none;
}

#checkout-section #order_review #checkout-table td.product-box .product-info .quantity-wrapper .quantity input {
    padding: 2px !important;
    font-size: 14px;
    width: 30px;
}

#checkout-section #order_review #checkout-table td.product-box .product-info .quantity-wrapper button {
    padding: 5px !important;
    font-size: 12px;
    width: 20px;
}

#checkout-section #order_review #checkout-table tfoot tr td,
#checkout-section #order_review #checkout-table tfoot tr th {
    padding: 15px 10px;
    font-family: var(--hebd-font-heading);
    font-size: 14px !important;
    font-weight: 600;
}


#checkout-section #order_review #checkout-table tfoot ul#shipping_method {
    min-width: 130px;
}

#checkout-section #order_review #checkout-table tfoot ul#shipping_method li,
#checkout-section #order_review #checkout-table tfoot ul#shipping_method li label {
    display: flex;
    align-items: center;
}

#checkout-section #order_review #checkout-table tfoot ul#shipping_method li {
    flex-direction: row-reverse;
}

#checkout-section #order_review #checkout-table tfoot ul#shipping_method li input {
    margin: 0 0 0 5px;
}

#checkout-section #order_review #checkout-table tfoot tr td span.woocommerce-Price-amount.amount {
    color: var(--primary-color);
}

#checkout-section #order_review #checkout-table tfoot tr td.total-amount span.woocommerce-Price-amount.amount {
    font-size: 19px;
}

#checkout-section #order_review #payment {
    background: transparent;
}

#checkout-section #order_review #payment ul li label {
    font-family: var(--hebd-font-body);
    font-size: 14px;
    line-height: 22.4px;
    font-weight: 400;
}

#checkout-section #order_review #payment ul li .payment_box.payment_method_cod::before {
    border: 1em solid #fff;
    border-right-color: transparent;
    border-left-color: transparent;
    border-top-color: transparent;
}

#checkout-section #order_review #payment ul li .payment_box.payment_method_cod {
    background: #fff;
}

#checkout-section #order_review #payment ul li .payment_box.payment_method_cod p {
    font-family: var(--hebd-font-body);
    font-size: 14px;
    line-height: 22.4px;
    font-weight: 400;
    color: #777;
}

#checkout-section #order_review #payment button.see-btn {
    padding: 5px 28px;
    min-height: 48px;
    font-size: 14px;
    text-transform: uppercase;
    box-shadow: none;
    font-family: var(--hebd-font-body);
    font-weight: 600;
}

/* ---- Checkout colour system ----
 * One warm palette for the whole checkout: cream page, warm-white cards,
 * one beige border family, dark text, and green only for the total, the
 * main action, selected controls and the offer badge. Colour only; sizes
 * and layout are untouched. Form fields keep their dark borders.
 */
#checkout-section {
    --co-border: #DDD4C7;
    --co-border-soft: #EAE3D8;
    --co-green-dark: #245B39;
    --co-green-soft: #EEF6EF;
    --co-green-border: #C9DDCC;
    background-color: var(--hebd-bg);
    color: var(--hebd-text);
}

#checkout-section .hebd-checkout-layout > .hebd-checkout-customer {
    border-color: var(--co-border);
    box-shadow: none;
}

#checkout-section form.checkout.woocommerce-checkout .woocommerce-billing-fields h3,
#checkout-section form.checkout.woocommerce-checkout .order-history-box h4 {
    color: var(--hebd-text);
}

/* Your order: a warm card with its own border instead of a grey sheet. */
#checkout-section form.checkout.woocommerce-checkout .order-history-box {
    background-color: var(--hebd-surface);
    border: 1px solid var(--co-border);
    border-radius: 16px;
}

#checkout-section form.checkout.woocommerce-checkout .order-history-box::before,
#checkout-section form.checkout.woocommerce-checkout .order-history-box::after {
    content: none;
}

#checkout-section #order_review #checkout-table {
    background-color: #fff;
    border: 1px solid var(--co-border-soft);
    border-radius: 12px;
    box-shadow: none;
}

#checkout-section #order_review #checkout-table th,
#checkout-section #order_review #checkout-table td {
    border-color: var(--co-border-soft);
    color: var(--hebd-text);
}

#checkout-section #order_review #checkout-table thead tr th {
    color: var(--hebd-text);
    border-bottom: 1px solid var(--co-border);
}

#checkout-section #order_review #checkout-table tbody tr + tr td,
#checkout-section #order_review #checkout-table tfoot tr th,
#checkout-section #order_review #checkout-table tfoot tr td {
    border-top: 1px solid var(--co-border-soft);
}

#checkout-section #order_review #checkout-table td.product-box .product-info h6 {
    color: var(--hebd-text);
}

#checkout-section #order_review #checkout-table td.product-d-price,
#checkout-section #order_review #checkout-table td.product-box .product-info .product-mobile-price {
    color: var(--hebd-text);
}

#checkout-section #order_review #checkout-table td.product-box .btn.remove-checkout-item svg {
    color: var(--hebd-text-muted);
}

/* Subtotal and shipping read as plain figures; only the total is green. */
#checkout-section #order_review #checkout-table tfoot tr td span.woocommerce-Price-amount.amount {
    color: var(--hebd-text);
}

#checkout-section #order_review #checkout-table tfoot tr th {
    color: var(--hebd-text-muted);
}

#checkout-section #order_review #checkout-table tfoot tr:last-child th {
    color: var(--hebd-text);
    font-weight: 700;
}

#checkout-section #order_review #checkout-table tfoot tr td.total-amount span.woocommerce-Price-amount.amount {
    color: var(--hebd-primary);
    font-size: 22px;
    font-weight: 700;
}

#checkout-section #order_review #checkout-table tfoot ul#shipping_method li label {
    color: var(--hebd-text);
}

#checkout-section #order_review input[type="radio"] {
    accent-color: var(--hebd-primary);
}

/* Payment methods */
#checkout-section #order_review #payment ul.payment_methods {
    border-bottom-color: var(--co-border-soft);
}

#checkout-section #order_review #payment div.form-row {
    border-top-color: var(--co-border-soft);
}

#checkout-section #order_review #payment ul li label {
    color: var(--hebd-text);
    font-weight: 500;
}

#checkout-section #order_review #payment ul li .payment_box.payment_method_cod {
    background: #F6F1EA;
    border: 1px solid var(--co-border-soft);
    border-radius: 10px;
}

#checkout-section #order_review #payment ul li .payment_box.payment_method_cod::before {
    border-bottom-color: #F6F1EA;
}

/* Muted text needs a touch more weight on the cream box to stay above 4.5:1. */
#checkout-section #order_review #payment ul li .payment_box.payment_method_cod p {
    color: #565F54;
}

#checkout-section #order_review #payment button.see-btn {
    background: var(--hebd-primary) !important;
    color: #fff !important;
    transition: background-color .15s ease;
}

#checkout-section #order_review #payment button.see-btn:hover {
    background: var(--co-green-dark) !important;
}

#checkout-section #order_review #payment button.see-btn:focus-visible {
    outline: 3px solid rgba(46, 112, 70, .45);
    outline-offset: 3px;
}

/* Checkout offers: a pale green panel apart from the order table. */
#checkout-section .hebd-checkout-offers {
    background: var(--co-green-soft);
    border-color: var(--co-green-border);
}

#checkout-section .hebd-checkout-offers__title {
    color: var(--hebd-text);
}

#checkout-section .hebd-checkout-offers__subtitle {
    padding: 3px 10px;
    border: 1px solid var(--co-green-border);
    border-radius: 999px;
    background: #fff;
    color: var(--co-green-dark);
    font-size: 12.5px;
}

#checkout-section .hebd-offer {
    background: var(--hebd-surface);
    border-color: var(--co-green-border);
}

#checkout-section .hebd-offer__name a {
    color: var(--hebd-text);
}

#checkout-section .hebd-offer__price {
    color: var(--hebd-primary);
}

#checkout-section .hebd-offer.is-added {
    background: #fff;
    border-color: var(--hebd-primary);
}

#checkout-section .hebd-offer__added {
    color: var(--co-green-dark);
}

#checkout-section .hebd-offer__remove {
    color: var(--hebd-text);
}
/* Thank You CSS */

#thankyou-section .woocommerce-order {
    margin: 0 auto;
    max-width: 1100px;
}

#thankyou-section .woocommerce-order p.woocommerce-notice {
    padding: 3%;
    width: 100%;
    color: var(--secondery-color);
    border: 2px dashed var(--secondery-color);
    text-align: center;
    font-weight: 600;
    font-size: 28px;
    line-height: 1.35;
    font-family: var(--hebd-font-heading);
    margin-bottom: 50px;
}

#thankyou-section .woocommerce-order ul.order_details {
    margin: 30px 0;
    /* padding-left: 0; */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#thankyou-section .woocommerce-order ul.order_details li {
    text-align: center;
    margin: 0 0 30px 0;
    padding: 0 20px;
}


#thankyou-section .woocommerce-order ul.order_details li p.description,
#thankyou-section .woocommerce-order ul.order_details li p.title {
    text-align: center;
    font-family: var(--hebd-font-heading);
    font-size: 16px;
    font-weight: 400;
    text-transform: none;
}

#thankyou-section .woocommerce-order ul.order_details li p.description {
    font-size: 19px;
    font-weight: 600;
    color: var(--hebd-text);
}

#thankyou-section .woocommerce-order>p:nth-of-type(2),
#thankyou-section .woocommerce-order ul.order_details li p.title {
    color: var(--hebd-text-muted);
    margin-bottom: 8px;
}

#thankyou-section .woocommerce-order>p:nth-of-type(2) {
    font-family: var(--hebd-font-heading);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 24px;
}

/* The invoice button sits under the order summary. */
#thankyou-section .hebd-order-actions {
    display: flex;
    justify-content: center;
    margin: 0 0 44px;
}

.hebd-order-actions .hebd-invoice-btn {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.hebd-order-actions .hebd-invoice-btn:focus-visible {
    outline: 3px solid var(--secondery-color);
    outline-offset: 3px;
}

.woocommerce-account .hebd-order-actions {
    margin: 0 0 30px;
}

.woocommerce-order-details h2.woocommerce-order-details__title {
    font-family: var(--hebd-font-heading);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 26px;
}

.woocommerce-order-details table.shop_table.order_details {
    border: none;
}

.woocommerce-order-details table.shop_table.order_details thead th {
    font-family: var(--hebd-font-body);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
}

.woocommerce-order-details table.shop_table.order_details tbody tr td,
.woocommerce-order-details table.shop_table.order_details tbody tr td a,
.woocommerce-order-details table.shop_table.order_details tfoot tr th,
.woocommerce-order-details table.shop_table.order_details tfoot tr td {
    font-size: 17px;
    color: var(--hebd-text-muted);
    font-weight: 600;
    line-height: 1.5;
}

.woocommerce-order-details table.shop_table.order_details tbody tr td,
.woocommerce-order-details table.shop_table.order_details tbody tr td a {
    font-family: var(--hebd-font-body);
}

/* The product line is what the customer checks first. */
.woocommerce-order-details table.shop_table.order_details tbody tr td.product-name,
.woocommerce-order-details table.shop_table.order_details tbody tr td.product-name a {
    color: var(--hebd-text);
}

.woocommerce-order-details table.shop_table.order_details tfoot tr th,
.woocommerce-order-details table.shop_table.order_details tfoot tr td {
    font-family: var(--hebd-font-heading);
}

.woocommerce-order-details table.shop_table.order_details tbody tr td a {
    text-decoration: none;
}

.woocommerce-order-details table.shop_table.order_details .product-total,
.woocommerce-order-details table.shop_table.order_details tfoot td {
    text-align: right;
}

.woocommerce-order-details table.shop_table.order_details tbody .product-total,
.woocommerce-order-details table.shop_table.order_details tfoot .woocommerce-Price-amount.amount {
    color: var(--primary-color);
    font-size: 19px;
}

.woocommerce-order-details table.shop_table.order_details tfoot .shipped_via {
    font-size: 15px;
    font-weight: 500;
}

.woocommerce-customer-details .woocommerce-column__title {
    font-family: var(--hebd-font-heading) !important;
    font-size: 30px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;

}

.woocommerce-customer-details address {
    font-family: var(--hebd-font-heading) !important;
    border: none !important;
    font-style: normal !important;
    font-size: 17px !important;
    line-height: 1.75 !important;
    font-weight: 400 !important;
    color: var(--hebd-text-muted) !important;
    padding: 0 !important;
}

/* ==================================================================== */
/* My Account                                                            */
/* ==================================================================== */

/*
 * Every account screen - the signed-in pages, the wishlist, and the logged-out
 * login, register and password screens - shares one look: warm page, white
 * cards with the site's line colour and card shadow, green for the primary
 * action and the current place. Rules are scoped to these sections; the
 * :is() with an id outranks WooCommerce's own button, table and form styles
 * without touching them anywhere else.
 */

#my-account-sec,
.hebd-auth {
    --acct-tint: #EDF5EF;
    --acct-tint-strong: #DDEBE1;
    --acct-ink: #141414;
    --acct-error: #B3261E;
    padding: 48px 0 64px;
    background-color: var(--hebd-bg);
    font-family: var(--hebd-font-body);
    font-size: 15px;
    line-height: 1.55;
    color: var(--hebd-text);
}

@media (max-width: 767.98px) {
    #my-account-sec,
    .hebd-auth {
        padding: 28px 0 44px;
    }
}

/* ---- Frame: menu beside content, stacked below 992px ---- */

.hebd-account__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

@media (min-width: 992px) {
    .hebd-account__layout {
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 32px;
    }
}

#my-account-sec .hebd-account__content {
    container-type: inline-size;
    min-width: 0;
    float: none;
    width: auto;
}

#my-account-sec .woocommerce-MyAccount-navigation {
    float: none;
    width: auto;
}

.hebd-account__title {
    margin: 0 0 20px;
    font-family: var(--hebd-font-heading);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--hebd-text);
}

/* ---- Account menu ---- */

.hebd-account-nav {
    padding: 12px;
    background: #fff;
    border: 1px solid var(--hebd-line);
    border-radius: 16px;
    box-shadow: var(--hebd-shadow-card);
}

.hebd-account-nav__identity {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    padding: 8px 8px 16px;
    border-bottom: 1px solid var(--hebd-line);
}

.hebd-account-nav__identity .hebd-avatar {
    width: 44px;
    height: 44px;
    font-size: 18px;
}

.hebd-account-nav__who {
    min-width: 0;
}

.hebd-account-nav__name,
.hebd-account-nav__email {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hebd-account-nav__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--hebd-text);
}

.hebd-account-nav__email {
    font-size: 13px;
    color: var(--hebd-text-muted);
}

.hebd-account-nav__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hebd-account-nav__list li {
    margin: 0;
}

.hebd-account-nav__list a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--hebd-text);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.hebd-account-nav__list a svg {
    flex: none;
    color: var(--hebd-text-muted);
    transition: color .15s ease;
}

.hebd-account-nav__list a:hover {
    background: var(--hebd-soft-tint);
    color: var(--hebd-primary-dark);
}

.hebd-account-nav__list a:hover svg {
    color: var(--hebd-primary);
}

/* Current page: tint, bold label, green icon and a marker dot - not colour alone. */
.hebd-account-nav__list li.is-active a {
    background: var(--acct-tint);
    color: var(--hebd-primary-dark);
    font-weight: 700;
}

.hebd-account-nav__list li.is-active a svg {
    color: var(--hebd-primary);
}

.hebd-account-nav__list li.is-active a::after {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--hebd-primary);
}

.hebd-account-nav__list .woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--hebd-line);
}

.hebd-account-nav__list .woocommerce-MyAccount-navigation-link--customer-logout a {
    color: var(--hebd-text-muted);
}

.hebd-account-nav__list .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    background: #F3F0EB;
    color: var(--hebd-text);
}

.hebd-account-nav a:focus-visible,
.hebd-account-nav__toggle:focus-visible {
    outline: 2px solid var(--hebd-primary);
    outline-offset: 2px;
}

.hebd-account-nav__toggle {
    display: none;
}

@media (max-width: 991.98px) {
    .hebd-account-nav {
        padding: 8px;
    }

    .hebd-account-nav__identity {
        padding: 6px 6px 12px;
    }

    .hebd-account-nav.is-collapsible .hebd-account-nav__toggle:not([hidden]) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        min-height: 52px;
        padding: 8px 14px;
        border: 1px solid var(--hebd-line);
        border-radius: 10px;
        background: var(--hebd-bg);
        color: var(--hebd-text);
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    .hebd-account-nav__toggle-text {
        display: flex;
        flex-direction: column;
        line-height: 1.25;
    }

    .hebd-account-nav__toggle-label {
        font-size: 12px;
        color: var(--hebd-text-muted);
    }

    .hebd-account-nav__toggle-current {
        font-size: 15px;
        font-weight: 700;
        color: var(--hebd-primary-dark);
    }

    .hebd-account-nav__toggle svg {
        flex: none;
        color: var(--hebd-primary);
        transition: transform .2s ease;
    }

    .hebd-account-nav.is-open .hebd-account-nav__toggle svg {
        transform: rotate(180deg);
    }

    .hebd-account-nav.is-collapsible .hebd-account-nav__list {
        margin-top: 8px;
    }

    .hebd-account-nav.is-collapsible:not(.is-open) .hebd-account-nav__list {
        display: none;
    }
}

/* ---- Buttons ---- */

:is(#my-account-sec, .hebd-auth) .hebd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    margin: 0;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: var(--hebd-font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

:is(#my-account-sec, .hebd-auth) .hebd-btn--primary {
    background: var(--hebd-primary);
    border-color: var(--hebd-primary);
    color: #fff;
}

:is(#my-account-sec, .hebd-auth) .hebd-btn--primary:hover {
    background: var(--hebd-primary-dark);
    border-color: var(--hebd-primary-dark);
    color: #fff;
}

:is(#my-account-sec, .hebd-auth) .hebd-btn--secondary {
    background: #fff;
    border-color: var(--hebd-primary);
    color: var(--hebd-primary-dark);
}

:is(#my-account-sec, .hebd-auth) .hebd-btn--secondary:hover {
    background: var(--acct-tint);
    color: var(--hebd-primary-dark);
}

:is(#my-account-sec, .hebd-auth) .hebd-btn--quiet {
    padding: 0 12px;
    background: transparent;
    color: var(--hebd-text);
}

:is(#my-account-sec, .hebd-auth) .hebd-btn--quiet:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

:is(#my-account-sec, .hebd-auth) .hebd-btn--sm {
    min-height: 38px;
    padding: 0 14px;
    font-size: 14px;
}

:is(#my-account-sec, .hebd-auth) .hebd-btn--block {
    width: 100%;
}

:is(#my-account-sec, .hebd-auth) .hebd-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

:is(#my-account-sec, .hebd-auth) .hebd-btn:focus-visible {
    outline: 3px solid rgba(46, 112, 70, .35);
    outline-offset: 2px;
}

/* ---- Cards, shared ---- */

.hebd-welcome,
.hebd-quick-card,
.hebd-panel,
.hebd-address-card,
.hebd-form-card,
.hebd-order-summary,
.hebd-empty,
.hebd-auth-card,
#my-account-sec .woocommerce-order-details,
#my-account-sec .woocommerce-customer-details:not(.hebd-address-grid) {
    background: #fff;
    border: 1px solid var(--hebd-line);
    border-radius: 16px;
    box-shadow: var(--hebd-shadow-card);
}

.hebd-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--hebd-text-muted);
    text-decoration: none;
}

.hebd-back-link:hover {
    color: var(--hebd-primary-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hebd-section-intro {
    margin: -8px 0 20px;
    font-size: 15px;
    color: var(--hebd-text-muted);
}

/* ---- Status pills: a dot plus the status name, never colour alone ---- */

.hebd-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px 4px 9px;
    border-radius: 999px;
    background: #EFEDE8;
    color: #4A4A45;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.hebd-status::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.hebd-status--processing {
    background: #E2F0F1;
    color: #1B5A61;
}

.hebd-status--completed {
    background: #E5F2E8;
    color: #1E5A34;
}

.hebd-status--on-hold,
.hebd-status--pending {
    background: #FCF0D9;
    color: #7A4F00;
}

.hebd-status--cancelled,
.hebd-status--failed {
    background: #FBE9E6;
    color: #9E2F24;
}

/* ---- Dashboard ---- */

.hebd-welcome {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px 20px;
    margin-bottom: 20px;
    padding: 24px 28px;
}

.hebd-avatar--lg {
    width: 56px;
    height: 56px;
    font-size: 22px;
}

.hebd-avatar--lg::after {
    width: 14px;
    height: 14px;
    border-width: 3px;
}

.hebd-welcome__title {
    margin: 0;
    font-family: var(--hebd-font-heading);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--hebd-text);
    overflow-wrap: anywhere;
}

.hebd-welcome__intro {
    margin: 4px 0 0;
    font-size: 15px;
    color: var(--hebd-text-muted);
}

.hebd-welcome__signout {
    margin: 0;
    font-size: 14px;
    color: var(--hebd-text-muted);
    white-space: nowrap;
}

.hebd-welcome__signout a {
    color: var(--hebd-text);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hebd-welcome__signout a:hover {
    color: var(--hebd-primary-dark);
}

.hebd-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.hebd-quick-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px;
    color: var(--hebd-text);
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.hebd-quick-card:hover {
    border-color: rgba(46, 112, 70, .45);
    box-shadow: var(--hebd-shadow-card-hover);
    color: var(--hebd-text);
    transform: translateY(-2px);
}

.hebd-quick-card:focus-visible {
    outline: 2px solid var(--hebd-primary);
    outline-offset: 3px;
}

.hebd-quick-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 10px;
    border-radius: 12px;
    background: var(--acct-tint);
    color: var(--hebd-primary);
}

.hebd-quick-card__title {
    font-family: var(--hebd-font-heading);
    font-size: 16px;
    font-weight: 700;
}

.hebd-quick-card__text {
    font-size: 14px;
    line-height: 1.45;
    color: var(--hebd-text-muted);
}

.hebd-quick-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--hebd-primary-dark);
}

.hebd-quick-card__cta svg,
.hebd-panel__link svg {
    transition: transform .2s ease;
}

.hebd-quick-card:hover .hebd-quick-card__cta svg,
.hebd-panel__link:hover svg {
    transform: translateX(3px);
}

.hebd-dashboard__panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.hebd-panel {
    padding: 20px 24px;
}

.hebd-panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.hebd-panel__title {
    margin: 0;
    font-family: var(--hebd-font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--hebd-text);
}

.hebd-panel__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--hebd-primary-dark);
    text-decoration: none;
    white-space: nowrap;
}

.hebd-panel__link:hover {
    color: var(--hebd-primary-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hebd-panel__empty {
    margin: 0;
    font-size: 15px;
    color: var(--hebd-text-muted);
}

.hebd-panel__empty a {
    color: var(--hebd-primary-dark);
    font-weight: 600;
}

.hebd-recent-orders {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hebd-recent-orders__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "num status"
        "date total";
    align-items: center;
    gap: 4px 12px;
    padding: 12px 0;
    border-top: 1px solid var(--hebd-line);
}

.hebd-recent-orders__item:first-child {
    padding-top: 2px;
    border-top: 0;
}

.hebd-recent-orders__number {
    grid-area: num;
    font-weight: 700;
    color: var(--hebd-text);
    text-decoration: none;
}

.hebd-recent-orders__number:hover {
    color: var(--hebd-primary-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hebd-recent-orders__date {
    grid-area: date;
    font-size: 13px;
    color: var(--hebd-text-muted);
}

.hebd-recent-orders__item .hebd-status {
    grid-area: status;
    justify-self: end;
}

.hebd-recent-orders__total {
    grid-area: total;
    justify-self: end;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.hebd-details-list {
    display: grid;
    gap: 14px;
    margin: 0;
}

.hebd-details-list > div {
    display: grid;
    gap: 2px;
}

.hebd-details-list dt {
    font-size: 13px;
    font-weight: 600;
    color: var(--hebd-text-muted);
}

.hebd-details-list dd {
    margin: 0;
    font-size: 15px;
    color: var(--hebd-text);
    overflow-wrap: anywhere;
}

.hebd-details-list address {
    margin: 0;
    font-style: normal;
    line-height: 1.5;
}

.hebd-details-list a {
    color: var(--hebd-primary-dark);
    font-weight: 600;
}

/* The content column decides the grid, not the window: it narrows beside the menu. */
@container (min-width: 860px) {
    .hebd-quick-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .hebd-dashboard__panels {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    }
}

@container (max-width: 459px) {
    /* Phones: four compact tiles, two across, instead of four tall cards. */
    .hebd-quick-grid {
        gap: 12px;
    }

    .hebd-quick-card {
        padding: 16px;
    }

    .hebd-quick-card__icon {
        width: 38px;
        height: 38px;
        margin-bottom: 6px;
    }

    .hebd-quick-card__text {
        display: none;
    }

    .hebd-quick-card__cta {
        padding-top: 8px;
        font-size: 13px;
    }

    .hebd-welcome {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 20px;
    }

    .hebd-welcome__signout {
        grid-column: 1 / -1;
    }

    .hebd-welcome__title {
        font-size: 22px;
    }

    .hebd-panel {
        padding: 18px;
    }
}

/* ---- Orders ---- */

#my-account-sec .hebd-orders-table {
    width: 100%;
    margin: 0 0 20px;
    border: 1px solid var(--hebd-line);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--hebd-shadow-card);
    overflow: hidden;
}

#my-account-sec .hebd-orders-table thead th {
    padding: 14px 20px;
    border: 0;
    background: var(--hebd-soft-tint);
    font-family: var(--hebd-font-body);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    text-transform: none;
    color: var(--hebd-text-muted);
}

#my-account-sec .hebd-orders-table tbody th,
#my-account-sec .hebd-orders-table tbody td {
    padding: 16px 20px;
    border: 0;
    border-top: 1px solid var(--hebd-line);
    background: transparent;
    font-family: var(--hebd-font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--hebd-text);
    vertical-align: middle;
    text-align: left;
}

#my-account-sec .hebd-orders-table tbody tr:hover > * {
    background: #FCFAF6;
}

#my-account-sec .hebd-orders-table .woocommerce-orders-table__cell-order-number a {
    font-weight: 700;
    color: var(--hebd-primary-dark);
    text-decoration: none;
}

#my-account-sec .hebd-orders-table .woocommerce-orders-table__cell-order-number a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

#my-account-sec .hebd-orders-table .woocommerce-orders-table__cell-order-total {
    font-variant-numeric: tabular-nums;
}

#my-account-sec .hebd-orders-table .woocommerce-orders-table__cell-order-total .amount {
    font-weight: 600;
}

#my-account-sec .hebd-orders-table .woocommerce-orders-table__header-order-actions {
    text-align: right;
}

.hebd-order-row-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

#my-account-sec .hebd-pagination {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

/* Phones and small tablets: each order becomes a card instead of a squeezed row. */
@media (max-width: 768px) {
    #my-account-sec .hebd-orders-table {
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }

    #my-account-sec .hebd-orders-table thead {
        display: none;
    }

    #my-account-sec .hebd-orders-table tbody {
        display: grid;
        gap: 12px;
    }

    #my-account-sec .hebd-orders-table tr {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 16px;
        background: #fff;
        border: 1px solid var(--hebd-line);
        border-radius: 14px;
        box-shadow: var(--hebd-shadow-card);
    }

    #my-account-sec .hebd-orders-table tbody th,
    #my-account-sec .hebd-orders-table tbody td,
    #my-account-sec .hebd-orders-table tbody tr:nth-child(2n) td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0;
        border: 0;
        background: transparent;
        text-align: left !important;
    }

    #my-account-sec .hebd-orders-table tbody tr:hover > * {
        background: transparent;
    }

    #my-account-sec .hebd-orders-table tbody td::before {
        content: attr(data-title);
        float: none;
        font-size: 14px;
        font-weight: 500;
        color: var(--hebd-text-muted);
    }

    #my-account-sec .hebd-orders-table tbody th {
        padding-bottom: 10px;
        border-bottom: 1px solid var(--hebd-line);
        font-size: 17px;
    }

    #my-account-sec .hebd-orders-table tbody th::before {
        content: attr(data-title);
        font-weight: 600;
        color: var(--hebd-text);
    }

    #my-account-sec .hebd-orders-table tbody td.woocommerce-orders-table__cell-order-actions {
        padding-top: 4px;
    }

    #my-account-sec .hebd-orders-table tbody td.woocommerce-orders-table__cell-order-actions::before {
        display: none;
    }

    #my-account-sec .hebd-order-row-actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        width: 100%;
    }

    #my-account-sec .hebd-order-row-actions .hebd-btn {
        min-height: 44px;
        margin: 0;
    }
}

/* ---- A single order ---- */

.hebd-order-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 16px;
    padding: 20px 24px;
}

.hebd-order-summary__title {
    margin: 0;
    font-family: var(--hebd-font-heading);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--hebd-text);
}

.hebd-order-summary__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 6px 0 0;
    font-size: 15px;
    color: var(--hebd-text-muted);
}

.hebd-order-summary__meta .amount {
    font-weight: 600;
    color: var(--hebd-text);
}

.hebd-order-summary__aside {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}

.hebd-order-summary__aside .hebd-status {
    padding: 6px 14px 6px 12px;
    font-size: 14px;
}

.hebd-order-summary__meta > span + span::before {
    content: "\00B7";
    margin-right: 8px;
    color: var(--hebd-text-muted);
}

@container (max-width: 459px) {
    .hebd-order-summary__meta {
        flex-direction: column;
        gap: 2px;
    }

    .hebd-order-summary__meta > span + span::before {
        content: none;
    }
}

/* The invoice plugin's button, as the order's secondary action. */
#my-account-sec .hebd-order-actions {
    display: flex;
    margin: 0;
}

#my-account-sec .hebd-order-actions .see-btn.hebd-invoice-btn {
    gap: 8px;
    min-height: 44px;
    padding: 0 18px !important;
    border: 1px solid var(--hebd-primary) !important;
    border-radius: 8px;
    background: #fff !important;
    color: var(--hebd-primary-dark) !important;
    font-size: 15px !important;
    font-weight: 600;
    line-height: 1.2 !important;
    letter-spacing: 0;
    text-transform: none;
    transition: background-color .15s ease;
}

#my-account-sec .hebd-order-actions .see-btn.hebd-invoice-btn:hover {
    background: var(--acct-tint) !important;
}

#my-account-sec .hebd-order-actions .see-btn.hebd-invoice-btn svg {
    width: 18px;
    height: 18px;
}

#my-account-sec .woocommerce-order-details,
#my-account-sec .woocommerce-customer-details:not(.hebd-address-grid) {
    margin: 0 0 16px;
    padding: 20px 24px;
}

#my-account-sec .woocommerce-order-details h2.woocommerce-order-details__title,
#my-account-sec .woocommerce-customer-details h2.woocommerce-column__title,
.hebd-order-updates .hebd-panel__title {
    margin: 0 0 12px;
    font-family: var(--hebd-font-heading);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
    color: var(--hebd-text);
}

#my-account-sec .woocommerce-order-details table.shop_table.order_details {
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
}

#my-account-sec .woocommerce-order-details table.order_details th,
#my-account-sec .woocommerce-order-details table.order_details td {
    padding: 12px 0;
    border: 0;
    border-top: 1px solid var(--hebd-line);
    background: transparent;
    font-family: var(--hebd-font-body);
    font-size: 15px;
    line-height: 1.45;
    color: var(--hebd-text);
    vertical-align: top;
}

#my-account-sec .woocommerce-order-details table.order_details thead th {
    border-top: 0;
    padding-top: 0;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    color: var(--hebd-text-muted);
}

#my-account-sec .woocommerce-order-details table.order_details .product-total,
#my-account-sec .woocommerce-order-details table.order_details tfoot td {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

#my-account-sec .woocommerce-order-details table.order_details .product-name a {
    color: var(--hebd-text);
    font-weight: 600;
    text-decoration: none;
}

#my-account-sec .woocommerce-order-details table.order_details .product-name a:hover {
    color: var(--hebd-primary-dark);
    text-decoration: underline;
}

#my-account-sec .woocommerce-order-details table.order_details .product-quantity {
    font-weight: 600;
    color: var(--hebd-text-muted);
}

#my-account-sec .woocommerce-order-details table.order_details tfoot th {
    font-weight: 500;
    color: var(--hebd-text-muted);
}

#my-account-sec .woocommerce-order-details table.order_details tfoot tr:last-child th,
#my-account-sec .woocommerce-order-details table.order_details tfoot tr:last-child td {
    font-size: 17px;
    font-weight: 700;
    color: var(--hebd-text);
}

#my-account-sec .woocommerce-order-details .order-again {
    margin: 16px 0 0;
}

#my-account-sec .woocommerce-order-details .order-again .button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--hebd-primary);
    border-radius: 8px;
    background: #fff;
    color: var(--hebd-primary-dark);
    font-size: 15px;
    font-weight: 600;
}

#my-account-sec .woocommerce-customer-details .woocommerce-columns--addresses {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

#my-account-sec .woocommerce-customer-details .woocommerce-column {
    float: none;
    width: auto;
    margin: 0;
}

#my-account-sec .woocommerce-customer-details address {
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--hebd-line);
    border-radius: 12px;
    background: var(--hebd-bg);
    font-style: normal;
    line-height: 1.6;
}

#my-account-sec .woocommerce-customer-details address p {
    margin: 6px 0 0;
}

.hebd-order-updates {
    margin-bottom: 16px;
}

.hebd-order-updates ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hebd-order-updates .woocommerce-OrderUpdate-meta {
    margin: 0;
    font-size: 13px;
    color: var(--hebd-text-muted);
}

@container (min-width: 600px) {
    #my-account-sec .woocommerce-customer-details .woocommerce-columns--addresses {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---- Addresses ---- */

.hebd-address-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

@container (min-width: 600px) {
    .hebd-address-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.hebd-address-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 24px;
}

#my-account-sec .hebd-address-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

#my-account-sec .hebd-address-card__head h2 {
    float: none;
    margin: 0;
    font-family: var(--hebd-font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--hebd-text);
}

.hebd-address-card__icon,
.hebd-form-card__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--acct-tint);
    color: var(--hebd-primary);
}

#my-account-sec .hebd-address-card__body {
    flex: 1;
    margin: 0;
    padding: 0;
    border: 0;
    font-style: normal;
    font-size: 15px;
    line-height: 1.6;
    color: var(--hebd-text);
}

.hebd-address-card__line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: var(--hebd-text-muted);
    overflow-wrap: anywhere;
}

.hebd-address-card__line svg {
    flex: none;
    color: var(--hebd-primary);
}

.hebd-address-card__empty {
    margin: 0;
    color: var(--hebd-text-muted);
}

#my-account-sec .hebd-address-card .hebd-btn {
    align-self: flex-start;
}

/* ---- Forms (account details, addresses, login and password screens) ---- */

.hebd-form-card {
    margin-bottom: 16px;
    padding: 24px 28px;
}

.hebd-form-card__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

.hebd-form-card__title {
    margin: 0;
    font-family: var(--hebd-font-heading);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--hebd-text);
}

.hebd-form-card__intro {
    margin: 4px 0 20px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--hebd-text-muted);
}

.hebd-form-card__head .hebd-form-card__intro {
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .hebd-form-card {
        padding: 20px 18px;
    }
}

:is(#my-account-sec, .hebd-auth) .hebd-account-form fieldset,
:is(#my-account-sec, .hebd-auth) .hebd-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px 20px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}

:is(#my-account-sec, .hebd-auth) .woocommerce-address-fields__field-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px 20px;
}

@container (min-width: 600px) {
    #my-account-sec .hebd-form-grid,
    #my-account-sec .woocommerce-address-fields__field-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #my-account-sec .hebd-form-grid > .form-row-wide,
    #my-account-sec .woocommerce-address-fields__field-wrapper > .form-row-wide {
        grid-column: 1 / -1;
    }
}

:is(#my-account-sec, .hebd-auth) .hebd-account-form .form-row {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
}

:is(#my-account-sec, .hebd-auth) .hebd-account-form .clear {
    display: none;
}

:is(#my-account-sec, .hebd-auth) .hebd-account-form .form-row > label,
:is(#my-account-sec, .hebd-auth) .hebd-account-form .form-row label:not(.hebd-check):not(.checkbox) {
    display: block;
    margin: 0 0 6px;
    font-family: var(--hebd-font-body);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--acct-ink);
}

:is(#my-account-sec, .hebd-auth) .hebd-account-form .required {
    border: 0;
    color: var(--acct-error);
    text-decoration: none;
}

/* The site-wide .form-control rule uses !important, so these answer in kind. */
:is(#my-account-sec, .hebd-auth) .hebd-account-form :is(input.input-text, input.form-control, select:not(.select2-hidden-accessible), textarea) {
    width: 100% !important;
    min-height: 48px !important;
    padding: 11px 14px !important;
    border: 1px solid var(--acct-ink) !important;
    border-radius: 8px !important;
    background-color: #fff !important;
    box-shadow: none !important;
    font-family: var(--hebd-font-body);
    font-size: 16px !important;
    line-height: 1.4;
    color: var(--acct-ink) !important;
}

:is(#my-account-sec, .hebd-auth) .hebd-account-form .password-input input {
    padding-right: 46px !important;
}

:is(#my-account-sec, .hebd-auth) .hebd-account-form :is(input.input-text, input.form-control, select:not(.select2-hidden-accessible), textarea)::placeholder {
    color: #6B6B6B;
    opacity: 1;
}

:is(#my-account-sec, .hebd-auth) .hebd-account-form :is(input.input-text, input.form-control, select:not(.select2-hidden-accessible), textarea):focus {
    border-color: var(--hebd-primary) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(46, 112, 70, .28) !important;
}

:is(#my-account-sec, .hebd-auth) .hebd-account-form .woocommerce-invalid :is(input.input-text, select, textarea) {
    border-color: var(--acct-error) !important;
}

:is(#my-account-sec, .hebd-auth) .hebd-account-form select:not(.select2-hidden-accessible) {
    padding-right: 40px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23141414' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    appearance: none;
}

/* A theme-wide rule sets select2's border with !important. */
:is(#my-account-sec, .hebd-auth) .hebd-account-form .select2-container--default .select2-selection--single {
    height: 48px !important;
    border: 1px solid var(--acct-ink) !important;
    border-radius: 8px !important;
    background: #fff !important;
}

:is(#my-account-sec, .hebd-auth) .hebd-account-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 14px !important;
    font-size: 16px !important;
    line-height: 46px !important;
    color: var(--acct-ink) !important;
}

:is(#my-account-sec, .hebd-auth) .hebd-account-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px;
    right: 8px;
}

:is(#my-account-sec, .hebd-auth) .hebd-account-form .select2-container--focus .select2-selection--single,
:is(#my-account-sec, .hebd-auth) .hebd-account-form .select2-container--open .select2-selection--single {
    border-color: var(--hebd-primary);
    box-shadow: 0 0 0 3px rgba(46, 112, 70, .28);
}

.hebd-field-hint,
:is(#my-account-sec, .hebd-auth) .hebd-account-form .description {
    display: block;
    margin-top: 6px;
    font-size: 13.5px;
    font-style: normal;
    line-height: 1.45;
    color: var(--hebd-text-muted);
}

.hebd-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

/* ---- Login, register and password screens ---- */

.hebd-auth__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}

@media (min-width: 992px) {
    .hebd-auth__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
    }

    .hebd-auth__grid.is-single {
        grid-template-columns: minmax(0, 560px);
        justify-content: center;
    }
}

.hebd-auth-card {
    padding: 32px;
    scroll-margin-top: 110px;
}

.hebd-auth-card--single {
    max-width: 520px;
    margin: 0 auto;
}

@media (max-width: 575.98px) {
    .hebd-auth-card {
        padding: 24px 18px;
    }
}

.hebd-auth-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--acct-tint);
    color: var(--hebd-primary);
}

.hebd-auth-card__title {
    margin: 0 0 6px;
    font-family: var(--hebd-font-heading);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: none;
    color: var(--hebd-text);
}

.hebd-auth-card__intro {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--hebd-text-muted);
}

/* WooCommerce boxes form.login / form.register in its own border; the card is the box here. */
:is(#my-account-sec, .hebd-auth) .hebd-auth-card form.hebd-account-form {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}

/* WooCommerce's order-attribution fields travel with the form but take no space. */
.hebd-auth-card .hebd-account-form wc-order-attribution-inputs {
    display: none;
}

.hebd-auth-card .hebd-account-form .hebd-auth-card__intro {
    margin: 0;
}

.hebd-auth-card__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hebd-auth-card__row a,
.hebd-auth-card .woocommerce-privacy-policy-text a {
    font-size: 14px;
    font-weight: 600;
    color: var(--hebd-primary-dark);
}

.hebd-auth .hebd-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--acct-ink);
    cursor: pointer;
}

.hebd-auth .hebd-check input[type="checkbox"] {
    flex: none;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    accent-color: var(--hebd-primary);
    cursor: pointer;
}

.hebd-auth-card__note,
.hebd-auth-card .woocommerce-privacy-policy-text p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--hebd-text-muted);
}

.hebd-auth-card .hebd-back-link {
    margin: 20px 0 0;
}

.hebd-auth-card .woocommerce-password-strength {
    margin-top: 8px;
    border-radius: 6px;
    font-size: 14px;
}

.hebd-auth-card .woocommerce-password-hint {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--hebd-text-muted);
}

/* ---- WooCommerce messages ---- */

:is(#my-account-sec, .hebd-auth) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
    position: relative;
    margin: 0 0 16px;
    padding: 14px 16px 14px 46px;
    border: 1px solid;
    border-radius: 12px;
    box-shadow: none;
    font-family: var(--hebd-font-body);
    font-size: 15px;
    line-height: 1.5;
    list-style: none;
}

:is(#my-account-sec, .hebd-auth) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
    top: 14px;
    left: 16px;
}

:is(#my-account-sec, .hebd-auth) .woocommerce-message {
    background: #EDF6EF;
    border-color: #BFDCC7;
    color: #1E4A2C;
}

:is(#my-account-sec, .hebd-auth) .woocommerce-message::before {
    color: var(--hebd-primary);
}

:is(#my-account-sec, .hebd-auth) .woocommerce-info {
    background: #FBF6EE;
    border-color: #E9DCC6;
    color: #4A3D2A;
}

:is(#my-account-sec, .hebd-auth) .woocommerce-info::before {
    color: #8A6D3B;
}

:is(#my-account-sec, .hebd-auth) .woocommerce-error {
    background: #FCEDEB;
    border-color: #F0C6C0;
    color: #7A2219;
}

:is(#my-account-sec, .hebd-auth) .woocommerce-error::before {
    color: var(--acct-error);
}

:is(#my-account-sec, .hebd-auth) .woocommerce-error li {
    margin: 0;
}

:is(#my-account-sec, .hebd-auth) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button) {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- Empty states ---- */

.hebd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 44px 24px;
    text-align: center;
}

.hebd-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: var(--acct-tint);
    color: var(--hebd-primary);
}

.hebd-empty__title {
    margin: 0;
    font-family: var(--hebd-font-heading);
    font-size: 20px;
    font-weight: 700;
    color: var(--hebd-text);
}

.hebd-empty__text {
    max-width: 42ch;
    margin: 0 0 12px;
    font-size: 15px;
    color: var(--hebd-text-muted);
}

/* ---- Wishlist ---- */

#my-account-sec .hebd-wishlist-grid[hidden],
#my-account-sec .hebd-wishlist-empty[hidden] {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .hebd-quick-card,
    .hebd-quick-card__cta svg,
    .hebd-panel__link svg,
    .hebd-account-nav__toggle svg {
        transition: none;
    }

    .hebd-quick-card:hover {
        transform: none;
    }
}

/* ---- Account order view: the order-confirmation page's rules (!important) stay there ---- */

#my-account-sec .woocommerce-customer-details .woocommerce-column__title {
    font-family: var(--hebd-font-heading) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

#my-account-sec .woocommerce-customer-details address {
    padding: 14px 16px !important;
    border: 1px solid var(--hebd-line) !important;
    font-family: var(--hebd-font-body) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--hebd-text) !important;
    overflow-wrap: anywhere;
}

#my-account-sec .woocommerce-order-details table.shop_table.order_details tbody .product-total,
#my-account-sec .woocommerce-order-details table.shop_table.order_details tfoot .woocommerce-Price-amount.amount {
    font-size: inherit;
    color: inherit;
}

#my-account-sec .woocommerce-order-details table.shop_table.order_details tfoot tr:last-child th,
#my-account-sec .woocommerce-order-details table.shop_table.order_details tfoot tr:last-child td {
    font-size: 15px;
    font-weight: 400;
}

#my-account-sec .woocommerce-order-details table.shop_table.order_details tfoot tr:last-child th {
    font-weight: 500;
    color: var(--hebd-text-muted);
}

#my-account-sec .woocommerce-order-details table.shop_table.order_details tfoot tr:has(.hebd-grand-total) th,
#my-account-sec .woocommerce-order-details table.shop_table.order_details tfoot tr:has(.hebd-grand-total) td {
    font-size: 17px;
    font-weight: 700;
    color: var(--hebd-text);
}

#my-account-sec .woocommerce-order-details .hebd-grand-total .amount {
    color: var(--hebd-primary-dark);
}

/* ---- Addresses: one address fills the row instead of half of it ---- */

#my-account-sec .hebd-address-card__head {
    padding: 0;
}

.hebd-address-card__line > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

@container (min-width: 600px) {
    .hebd-address-grid > .hebd-address-card:only-child {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "head head"
            "body action";
        align-items: end;
        column-gap: 24px;
    }

    .hebd-address-card:only-child .hebd-address-card__head {
        grid-area: head;
    }

    .hebd-address-card:only-child .hebd-address-card__body {
        grid-area: body;
    }

    .hebd-address-card:only-child > .hebd-btn {
        grid-area: action;
    }
}

/* ---- Forms: comfortable line length, quieter details ---- */

#my-account-sec .woocommerce-address-fields {
    max-width: 720px;
}

:is(#my-account-sec, .hebd-auth) .hebd-account-form .woocommerce-input-wrapper strong {
    font-weight: 500;
}

:is(#my-account-sec, .hebd-auth) .hebd-account-form .show-password-input {
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    opacity: .55;
    transition: opacity .15s ease;
}

:is(#my-account-sec, .hebd-auth) .hebd-account-form .show-password-input:hover,
:is(#my-account-sec, .hebd-auth) .hebd-account-form .show-password-input:focus-visible {
    opacity: 1;
}

/* ---- Messages: drawn icons, the action beside the text, no focus frame ---- */

:is(#my-account-sec, .hebd-auth) :is(.woocommerce-message, .woocommerce-info) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
}

/* WooCommerce focuses a new message so screen readers announce it; that is not keyboard navigation. */
:is(#my-account-sec, .hebd-auth) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):focus {
    outline: none;
}

:is(#my-account-sec, .hebd-auth) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
    content: "";
    position: absolute;
    top: 16px;
    left: 16px;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    font-family: inherit;
    -webkit-mask: var(--notice-icon) center / contain no-repeat;
    mask: var(--notice-icon) center / contain no-repeat;
}

:is(#my-account-sec, .hebd-auth) .woocommerce-message {
    --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z'/%3E%3C/svg%3E");
}

:is(#my-account-sec, .hebd-auth) .woocommerce-info {
    --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2'/%3E%3C/svg%3E");
}

:is(#my-account-sec, .hebd-auth) .woocommerce-error {
    --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4m.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2'/%3E%3C/svg%3E");
}

:is(#my-account-sec, .hebd-auth) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button {
    float: none;
    order: 2;
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    margin: 0 0 0 auto;
    padding: 0 14px;
    border: 1px solid var(--hebd-primary);
    border-radius: 8px;
    background: #fff;
    color: var(--hebd-primary-dark);
    font-family: var(--hebd-font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

:is(#my-account-sec, .hebd-auth) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button:hover {
    background: var(--acct-tint);
    color: var(--hebd-primary-dark);
}

@container (max-width: 459px) {
    #my-account-sec :is(.woocommerce-message, .woocommerce-info) .button {
        width: 100%;
        justify-content: center;
        margin-left: 0;
    }
}

/* ---- Small phones: identity already shows in the welcome and the header ---- */

@media (max-width: 991.98px) {
    .hebd-account-nav__identity {
        display: none;
    }
}

/* ---- Wishlist: the remove control is always visible, not only on hover ---- */

#my-account-sec .hebd-wishlist-grid .hover-icon {
    opacity: 1;
    transform: translateX(-10px);
}

.hebd-auth-card__intro + .hebd-back-link {
    margin-top: 0;
}
/* ---- Enhanced (select2) dropdowns in account forms ---- */

/* The original <select> stays in the page for the form to submit; the theme's
   .form-control rule stretched it to the full window and made pages scroll sideways. */
:is(#my-account-sec, .hebd-auth) select.select2-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
}

:is(#my-account-sec, .hebd-auth) .hebd-account-form .select2-container--default .select2-selection--single {
    padding: 0 !important;
}

:is(#my-account-sec, .hebd-auth) .hebd-account-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 36px !important;
    font-weight: 400 !important;
}

/* ---- Address card header: WooCommerce's clearfix pseudo-elements became flex items ---- */

#my-account-sec .hebd-address-card__head::before,
#my-account-sec .hebd-address-card__head::after {
    content: none;
}

.hebd-address-card__line {
    color: var(--hebd-text);
}

/* ---- Order view: the order-confirmation page enlarges this title on phones ---- */

#my-account-sec .woocommerce-order-details h2.woocommerce-order-details__title,
#my-account-sec .woocommerce-customer-details .woocommerce-column__title {
    font-size: 18px !important;
}

#my-account-sec .woocommerce-customer-details :is(.woocommerce-customer-details--phone, .woocommerce-customer-details--email) {
    font-size: 14px;
    overflow-wrap: break-word;
}

/* ---- Account details: same comfortable width as the address form ---- */

#my-account-sec .edit-account .hebd-form-grid {
    max-width: 720px;
}

/* ---- Checkbox in the site's style ---- */

.hebd-auth .hebd-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    display: inline-grid;
    place-content: center;
    border: 1.5px solid var(--acct-ink);
    border-radius: 4px;
    background: #fff;
    transition: background-color .15s ease, border-color .15s ease;
}

.hebd-auth .hebd-check input[type="checkbox"]:checked {
    border-color: var(--hebd-primary);
    background: var(--hebd-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z'/%3E%3C/svg%3E") center / 13px no-repeat;
}

.hebd-auth .hebd-check input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--hebd-primary);
    outline-offset: 2px;
}

/* ---- Wishlist: the always-visible card actions get a proper tap target ---- */

#my-account-sec .hebd-wishlist-grid .hover-icon > :is(a, button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 0 8px;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(31, 42, 34, .08), 0 4px 12px -4px rgba(31, 42, 34, .25);
}

#my-account-sec .hebd-wishlist-grid .hover-icon svg:not(.loading):not(.complete) {
    width: 18px;
    height: 18px;
}

/* ---- Phones: the menu button is the card, not a box inside one ---- */

@media (max-width: 991.98px) {
    .hebd-account-nav {
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .hebd-account-nav.is-collapsible .hebd-account-nav__toggle:not([hidden]) {
        border-color: var(--hebd-line);
        border-radius: 12px;
        background: #fff;
        box-shadow: var(--hebd-shadow-card);
    }

    .hebd-account-nav.is-collapsible .hebd-account-nav__list,
    .hebd-account-nav:not(.is-collapsible) .hebd-account-nav__list {
        padding: 6px;
        background: #fff;
        border: 1px solid var(--hebd-line);
        border-radius: 12px;
        box-shadow: var(--hebd-shadow-card);
    }
}
/* Theme-wide fieldset look, kept for forms outside the account area. */
fieldset {
    border: 2px solid #e0e0e0;
    padding: 0 40px 40px 40px;
    border-radius: 4px;
    position: relative;
    margin-top: 50px;
    margin-bottom: 30px;
}

fieldset legend {
    font-weight: bold;
    padding: 0 10px;
    font-size: 22px;
    position: relative;
    top: -20px;
    color: #333;
    display: inline-block;
    z-index: 1;
    background-color: #fafafa;
    width: auto;
}

fieldset legend::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 100%;
    height: 1px;
    z-index: 0;
}

/* Wishlist CSS */

#wishlist-page-wrapper {
    padding: 100px 0;
}

#wishlist-page-wrapper .no-product {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

#wishlist-page-wrapper .no-product svg {
    height: 200px;
    width: 200px;
    margin-bottom: 30px;
    color: rgba(0, 0, 0, 0.07);
}

#wishlist-page-wrapper .no-product h1 {
    font-family: var(--hebd-font-heading);
    font-size: 48px;
    font-weight: 600;
    margin-bottom: 20px;
}

#wishlist-page-wrapper .no-product p {
    font-family: var(--hebd-font-body);
    font-size: 15.4px;
    color: #777;
    font-weight: 400;
    margin-bottom: 15px;
}

#wishlist-page-wrapper .no-product a.see-btn {
    font-size: 16px;
}

/* Select Multiple Products */

/* .select-bultiple-products form {
    flex-direction: column;
}

.select-bultiple-products form button[type='submit'] {
    display: block !important;
    padding: 10px !important;
    color: #FFF;
    font-size: 13px;
    text-align: center;
    border: none;
    border-radius: 4px;
    background: var(--primary-color);
    font-weight: 600;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    margin: 20px auto 0 auto;
} */