:root{
  --ink:#33322c;
  --soft:#6d6b62;
  --paper:#fdfcfb;
  --olive:#667d15;
  --olive-d:#4d5f10;
  --olive-hover:#cad1b0;
  --olive-s:#eef3ea;
  --line:#dedbd1;
}

html {
   overflow-x:hidden;
   scroll-behavior:smooth
}

body.modal-open{
   padding-right:0!important
}

body {
   margin:0;
   background-image: url('../images/leaf.jpg');
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: 85vw center;
   color:var(--ink);
   font-family: 'Lato', sans-serif;
}


a {
   color:var(--olive-d);
   text-decoration:none
}

a:hover {
   color:var(--olive);
}

.font-serif,h1,h2,h3,h4,h5,h6 {
   font-family:'Comfortaa',sans-serif
}

/* --- Navigáció --- */
.navbar {
   border-bottom:1px solid var(--line);
   will-change:transform
}

.navbar .nav-link {
   font-family:'Comfortaa',sans-serif;
   font-weight:600;
   font-size:.8125rem;
   letter-spacing:.04em;
   text-transform:uppercase;
   color:#000 !important
}
.navbar .nav-link:hover {
   color:var(--olive-hover) !important
}

.nav-icons a:not(.dropdown-item) {
   color:#000;
   font-size:1rem
}

.nav-icons a:not(.dropdown-item):hover {
   color:var(--olive-hover)
}

.navbar .dropdown-menu {
   font-family:'Comfortaa',sans-serif;
   border:1px solid var(--line);
   border-radius:0;
   font-size:.8125rem
}

.navbar .dropdown-item:hover,.navbar .dropdown-item:focus {
   background:var(--olive-hover);
   color:#000
}

.navbar .nav-item.dropdown .nav-link::after {
   margin-left:.4em;
   vertical-align:.15em
}

.navbar .dropdown-menu {
   position:absolute;
   top:100%;
   left:0;
   margin-top:.125rem;
   z-index:1030
}

.navbar .dropdown-menu-end {
   right:0;
   left:auto
}

.navbar .dropdown-menu {
  display:block;
  opacity:0;
  transform:translateY(-8px);
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;
}

.navbar .dropdown-menu.show {
  opacity:1;
  transform:translateY(0);
  visibility:visible;
  pointer-events:auto;
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear;
}

.search-collapse {
   position:absolute;
   top:100%;
   left:0;
   right:0;
   z-index:1020;
   border-bottom:1px solid var(--line);
   background:#fff
}

.search-collapse input {
   border:1px solid var(--line);
   font-size:.9rem;
   padding:.6rem 1rem
}

.search-collapse input:focus {
   box-shadow:none;
   border-color:var(--line)
}

.nav-search-badges{
   position:absolute;
   top:100%;
   left:0;
   right:0;
   margin-top:.5rem;
   display:flex;
   flex-direction:column;
   background:#fff;
   border:1px solid var(--line);
   box-shadow:0 6px 18px rgba(0,0,0,.1);
   max-height:0;
   overflow:hidden;
   opacity:0;
   transform:translateY(-6px);
   transition:max-height .25s ease,opacity .2s ease,transform .2s ease;
   z-index:10;
}

.nav-search-badges.is-open {
   max-height:320px;
   opacity:1;
   transform:translateY(0);
   overflow-y:auto
}

.nav-search-badges a{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.55rem 1rem;
  font-size:.875rem;color:var(--ink);
  border-bottom:1px solid var(--line);
}

.nav-search-badges a:last-child {
   border-bottom:0
}

.nav-search-badges a:hover {
   background:var(--olive-s);color:var(--ink)
}

.nav-search-badges a i {
   color:var(--olive-d);
   font-size:1.1em;
   width:1.2em;
   text-align:center
}

.navbar-toggler{
   border:0;
   padding:0;
   box-shadow:none
}

.navbar-toggler:focus,.navbar-toggler:active {
   box-shadow:none;outline:0
}

.navbar-toggler-icon{
   background-image:none;
   background-color:#000;
   mask-image:url("../images/menu-bars.svg");
   -webkit-mask-image:url("../images/menu-bars.svg");
   -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
   -webkit-mask-position:center;mask-position:center;
   -webkit-mask-size:100%;mask-size:100%;
   transform:scaleX(-1);
}

.navbar-toggler:hover .navbar-toggler-icon {
   background-color:var(--olive-hover)
}

.cart-badge {
   position:absolute;
   top:-8px;
   right:-10px;
   background:#c0392b;
   color:#fff;
   font-size:.55rem;
   font-weight:600;
   min-width:16px;
   height:16px;
   padding:0 3px;
   border-radius:50%;
   display:flex;
   align-items:center;
   justify-content:center
}

/* --- Hero / carousel --- */
.hero{
   position:relative;
   height:560px;
   overflow:hidden;
   overflow-anchor:none;
   background:repeating-linear-gradient(45deg,#e9e6dd,#e9e6dd 14px,#f1efe8 14px,#f1efe8 28px)
}

.hero .carousel,.hero .carousel-inner,.hero .carousel-item {
   height:100%
}

.hero .carousel-item img {
   width:100%;
   height:100%;
   object-fit:cover
}

.hero-card {
   position:absolute;
   left:48px;
   bottom:40px;
   max-width:440px;
   background:#fff;
   padding:32px 36px;
   box-shadow:0 12px 32px rgba(0,0,0,.10);
   z-index:2;
   font-family:'Comfortaa',sans-serif
}

.hero-arrow {
   position:absolute;
   top:50%;
   transform:translateY(-50%);
   color:#fff;
   font-size:1.15rem;
   z-index:2;
   background:none;
   border:0;
   padding:.5rem;
   opacity:.85
}

.hero-arrow:hover {
   opacity:1
}

.hero-dots {
   z-index:2;
   left:0;
   right:0;
   margin:0;
   bottom:16px;
   gap:8px;
   display:flex;
   justify-content:center
}

.hero-dots [data-bs-target] {
   position:relative;
   width:36px;
   height:4px;
   background:rgba(0,0,0,.45);
   box-shadow:0 0 0 1px rgba(255,255,255,.4);
   display:inline-block;
   border:0;
   padding:0;
   border-radius:2px;
   overflow:hidden;
   opacity:1
}

.hero-dots [data-bs-target]::after {
   content:'';
   position:absolute;
   top:0;
   left:0;
   height:100%;
   width:0;
   background:#fff;
   border-radius:2px
}

.hero-dots [data-bs-target].dot-filling::after {
   animation:heroDotFill var(--hero-interval,5000ms) linear forwards
}

@keyframes heroDotFill {
   from
      {
         width:0
      }
   to
      {
         width:100%
      }
}

.btn-olive {
   background:var(--olive);
   border-color:var(--olive);
   color:#fff;
   font-weight:500;
   font-size:.8125rem;
   letter-spacing:.03em;
   text-transform:uppercase;
   padding:.7rem 1.4rem
}

.btn-olive:hover {
   background:var(--olive-hover);
   border-color:var(--olive-hover);
   color:#000
}

@media (max-width: 767.98px){
   .hero {
      height:420px
   }
   .hero-card {
      left:16px;
      right:16px;
      bottom:20px;
      max-width:none;
      padding:20px 22px
   }
}


/* --- Kategória rács --- */
.category-card {
   background:#fff;
   box-shadow:0 6px 18px rgba(0,0,0,.06)
}

.category-img {
   aspect-ratio:2/3;
   overflow:hidden;
   background:repeating-linear-gradient(45deg,#e2e6dc,#e2e6dc 10px,#eef0e9 10px,#eef0e9 20px);
   display:flex;
   align-items:center;
   justify-content:center
}

.category-img img {
   width:100%;
   height:100%;
   object-fit:cover;
   transition:transform .3s ease
}

.category-card:hover .category-img img {
   transform:scale(1.06)
}


.admin-edit-link {
   color:var(--soft);
   font-size:.75em;
   margin-left:.4rem;
   vertical-align:middle
}

.admin-edit-link:hover {
   color:var(--olive-d)
}

.admin-edit-link-card {
   position:absolute;
   top:.5rem;
   left:.5rem;
   z-index:2;
   background:#fff;
   width:28px;
   height:28px;
   border-radius:50%;
   display:flex;
   align-items:center;
   justify-content:center;
   box-shadow:0 2px 6px rgba(0,0,0,.15);
   font-size:.8125rem
}

.badge-icon {
   color:var(--olive-d);
   font-size:2.5rem;
   line-height:1
}

.flag-badge {
   width:20px;
   height:20px;
   border-radius:50%;
   object-fit:cover;
   flex:0 0 auto
}

.cart-controls .btn-qty-minus,.cart-controls .btn-qty-plus {
   background:var(--olive);
   border-color:var(--olive);
   color:#fff;
   padding-left:1rem;
   padding-right:1rem
}

.cart-controls .btn-qty-minus:hover,.cart-controls .btn-qty-plus:hover {
   background:var(--olive-hover);
   border-color:var(--olive-hover);
   color:#000
}

.cart-controls .btn {
   border-radius:0
}

.cart-actions .btn {
   border-radius:0
}

.cart-row-removing {
   opacity:0;
   transform:translateX(24px);
   transition:opacity .3s ease,transform .3s ease
}

.empty-cart-img {
   width:280px;
   max-width:60%
}

.cart-img {
   width: 70px;
}

.cart-product-title {
   min-width: 200px;
}
.cart-line-total, .cart-product-price {
   text-align: center;
   width: 180px;
}

.cart-qty-col {
   min-width: 200px;
}

.cart-qty-stepper {
   flex-wrap: nowrap;
}

/* --- Termék-részletező galéria --- */
.product-gallery {
   position:relative
}

.product-main-img {
   width:100%;
   aspect-ratio:2/3;
   object-fit:cover;
   cursor:zoom-in
}

.product-gallery-arrow {
   position:absolute;
   top:50%;
   transform:translateY(-50%);
   z-index:2;
   width:36px;
   height:36px;
   border-radius:50%;
   border:0;
   background:#fff;
   color:var(--olive-d);
   display:flex;
   align-items:center;
   justify-content:center;
   opacity:.85;
   box-shadow:0 2px 6px rgba(0,0,0,.15)
}

.product-gallery-arrow:hover {
   opacity:1
}

.product-thumb {
   width:60px;
   height:90px;
   object-fit:cover;
   cursor:pointer;
   opacity:.65;
   transition:opacity .2s ease
}

.product-thumb.active,.product-thumb:hover {
   opacity:1
}

.image-lightbox-content {
   background:#fff;
   border-radius:0;
   padding:2.5rem 1rem 1rem
}

.image-lightbox-close {
    position:absolute;
    top:.75rem;
    right:.75rem;
    z-index:2;
    width:36px;
    height:36px;
    border-radius:50%;
    background-color:#fff;
    opacity:1;
    box-shadow:0 2px 8px rgba(0,0,0,.2);
}

.image-lightbox-close:hover {
   background-color:var(--olive-s)
}

.image-lightbox-body {
   position:relative;
   display:flex;
   align-items:center;
   justify-content:center;
   max-height:80vh
}

.image-lightbox-body img {
   max-width:100%;
   max-height:80vh;
   width:auto;
   height:auto;
   object-fit:contain
}

.image-lightbox-arrow {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:2;
    width:40px;
    height:40px;
    border-radius:50%;
    background:#fff;
    color:var(--olive-d);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:.9;
    box-shadow:0 2px 8px rgba(0,0,0,.2);
}

.image-lightbox-arrow:hover {
   opacity:1
}

.image-lightbox-prev {
   left:-8px
}

.image-lightbox-next {
   right:-8px
}

.image-lightbox-counter {
   text-align:center;
   margin-top:.75rem;
   color:var(--soft);
   font-size:.875rem
}

@media (max-width:576px) {
    .image-lightbox-content {
      padding:2.25rem .5rem .5rem
   }
    .image-lightbox-prev {
      left:-4px
   }
    .image-lightbox-next {
      right:-4px
   }
}

/* --- Rólunk --- */
.about-photo {
   min-height:600px;
   background-size:cover;
   background-position:center top
}
.about-text p {
   color:var(--soft);
   line-height:1.75;
   font-size:.95rem
}

.page-title  {
   border-bottom: 1px solid var(--line);
}

/* --- Global form elements override --- */
.form-select:focus  {
   border-color: #000;
   outline: 0 !important;
   box-shadow: 0 0 0 .25rem rgba(202, 209, 176,.25) !important;
}

/* --- Hírlevél --- */
.newsletter {
   background:var(--olive-s)
}

.newsletter input {
   border:1px solid var(--line);
   padding:.7rem .9rem;
   font-size:.8125rem
}

.btn-olive-d {
   background:var(--olive);
   border-color:var(--olive);
   color:#fff;
   font-weight:500;
   font-size:.8125rem;
   letter-spacing:.03em;
   text-transform:uppercase;
   padding:.7rem 1.4rem
}

.btn-olive-d:hover {
   background:var(--olive-hover);
   border-color:var(--olive-hover);
   color:#000
}

/* --- Lábléc --- */
footer.site-footer {
   font-size:.8125rem;
   color:var(--soft);
   background:var(--paper);
   border-top:1px solid var(--line)
}

footer.site-footer h6 {
   font-weight:500;
   font-size:.75rem;
   letter-spacing:.08em;
   text-transform:uppercase;
   color:var(--ink)
}

.footer-bottom {
   border-top:1px solid var(--line);
   font-size:.75rem;
   color:var(--soft)
}

.social-icons a {
   color:var(--olive-d);
   font-size:1rem
}

.footer-payment  {
   width: 3rem;
   padding: 0 .5rem;
}

/* --- Checkout (rendelés) --- */
.checkout-form .form-control,.checkout-form .form-select,.checkout-form textarea {
   border-radius:0;
   border-color:var(--line)
}

.checkout-form .form-control:focus,.checkout-form .form-select:focus,.checkout-form textarea:focus {
   border-color:var(--olive);
   box-shadow:0 0 0 .2rem rgba(102,125,21,.15)
}
.checkout-form .btn {
   border-radius:0
}

.checkout-form input[type=radio],.checkout-form input[type=checkbox] {
   accent-color:var(--olive)
}

.checkout-form .form-check-input:checked {
   background-color:var(--olive);
   border-color:var(--olive)
}

.checkout-form .form-check-input:focus {
   border-color:var(--olive);
   box-shadow:0 0 0 .2rem rgba(102,125,21,.15)
}

.checkout-heading {
   font-size:1.05rem;
   font-weight:600;
   margin-bottom:1.25rem
}

.checkout-heading i {
   margin-right:.6rem;
   font-size:.95em
}

.checkout-section {
   margin-bottom:2.5rem
}

.checkout-card {
   background:#fff;
   border:1px solid var(--line);
   padding:1.5rem 1.75rem;
   box-shadow:0 6px 18px rgba(0,0,0,.06)
}

/* --- Bejelentkezés / Regisztráció --- */
.auth-card .form-control:focus {
   border-color:var(--olive);
   box-shadow:0 0 0 .2rem rgba(102,125,21,.15)
}

.auth-card input[type=checkbox] {
   accent-color:var(--olive)
}

.auth-card .form-check-input:checked {
   background-color:var(--olive);
   border-color:var(--olive)
}

.auth-card .form-check-input:focus {
   border-color:var(--olive);
   box-shadow:0 0 0 .2rem rgba(102,125,21,.15)
}

.checkout-field-error {
   color:#dc3545;
   font-size:.8125rem;
   margin-top:.35rem
}

.checkout-form .form-control.is-invalid,.checkout-form textarea.is-invalid {
   border-color:#dc3545
}

.checkout-form .form-control.is-invalid:focus,.checkout-form textarea.is-invalid:focus {
   border-color:#dc3545;
   box-shadow:0 0 0 .2rem rgba(220,53,69,.15)
}

/* --- Fiókom  --- */
.account-sidebar {
   border:1px solid var(--line);
   box-shadow:0 6px 18px rgba(0,0,0,.06)
}

.account-sidebar .list-group-item {
   border:0;
   border-bottom:1px solid var(--line);
   padding:1rem 1.25rem;
   color:var(--ink)
}

.account-sidebar .list-group-item:last-child {
   border-bottom:0
}

.account-sidebar .list-group-item i {
   color:var(--olive);
   width:1.1em;
   margin-right:.85rem;
   text-align:center
}

.account-sidebar .list-group-item.active {
   background:var(--olive-s);
   color:var(--ink);
   font-weight:600
}

.account-sidebar .list-group-item.active i {
   color:var(--olive-d)
}

.account-sidebar .list-group-item {
   transition:background-color .15s ease
}

.account-sidebar .list-group-item:hover:not(.active) {
   background-color:rgba(102,125,21,.08)
}

.account-tile {
   background:#fff;
   border:1px solid var(--line);
   box-shadow:0 6px 18px rgba(0,0,0,.06);
   padding:1.75rem 1rem;
   text-align:center;
   transition:transform .2s ease
}

.account-tile:hover {
   transform:translateY(-3px)
}

.account-tile i {
   color:var(--olive);
   font-size:1.75rem;
   margin-bottom:.75rem;
   display:block
}

.account-tile span {
   font-weight:600;
   font-size:.875rem;
   color:var(--ink)
}

.address-tile {
   background:#fff;
   border:1px solid var(--line);
   box-shadow:0 6px 18px rgba(0,0,0,.06);
   padding:1.25rem 1.5rem;
   height:100%
}

.address-tile .address-tile-header {
   display:flex;
   justify-content:space-between;
   align-items:flex-start;
   gap:.5rem;
   margin-bottom:.5rem
}

.address-tile .address-tile-actions {
   margin-top:1rem;
   display:flex;
   gap:.5rem
}

.address-tile-new {
   background:transparent;
   border:1px dashed var(--line);
   display:flex;
   flex-direction:column;
   align-items:center;
   justify-content:center;
   text-align:center;
   padding:1.75rem 1rem;
   height:100%;
   min-height:160px;
   color:var(--olive-d);
   font-weight:600;
   cursor:pointer;
   transition:background-color .2s ease;
   width:100%
}

.address-tile-new:hover {
   background:var(--olive-s)
}

.address-tile-new i {
   font-size:1.5rem;
   margin-bottom:.5rem;
   color:var(--olive)
}

.account-modal .modal-content {
   border-radius:0
}
.account-modal .form-control {
   border-radius:0
}

.account-modal .form-control:focus {
   border-color:var(--olive);
   box-shadow:0 0 0 .2rem rgba(102,125,21,.15)
}

.account-modal input[type=checkbox] {
   accent-color:var(--olive)
}

.account-modal .form-check-input:checked {
   background-color:var(--olive);
   border-color:var(--olive)
}

.account-modal .form-check-input:focus {
   border-color:var(--olive);
   box-shadow:0 0 0 .2rem rgba(102,125,21,.15)
}

.account-modal .btn-close:focus {
   box-shadow:0 0 0 .2rem rgba(102,125,21,.15)
}

/* --- SimplePay  --- */
#simplepayConsent {
   accent-color:var(--olive)
}

#simplepayConsent:checked {
   background-color:var(--olive);
   border-color:var(--olive)
}

#simplepayConsent:focus {
   border-color:var(--olive);
   box-shadow:0 0 0 .2rem rgba(102,125,21,.15)
}

.option-row {
   display:flex;
   align-items:center;
   gap:.75rem;
   padding:1rem;
   border-bottom:1px solid var(--line);
   border-radius:0;
   margin:0;
   cursor:pointer
}

.option-row:last-child {
   border-bottom:0
}

.option-row .form-check-input {
   margin-top:0;
   margin-left:0;
   flex:0 0 auto;
   cursor:pointer
}

.option-row .form-check-label {
   flex:1 1 auto;
   margin-bottom:0;
   cursor:pointer
}

.option-row-price {
   flex:0 0 auto;
   font-weight:600;
   white-space:nowrap
}

.option-row:has(input:checked) {
   background:var(--olive-s)
}

.addr-option-grid {
   display:grid;
   grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
   gap:.75rem;
   margin-bottom:.75rem
}

.addr-option-card {
   position:relative;
   display:block;
   border:1px solid var(--line);
   padding:.85rem 1rem .85rem 2.1rem;
   cursor:pointer;
   font-size:.875rem;
   transition:background-color .2s ease,border-color .2s ease
}

.addr-radio-hidden {
   position:absolute;
   width:0;
   height:0;
   margin:0;
   padding:0;
   opacity:0
}

.addr-option-sub {
   display:block;
   color:var(--soft);
   font-size:.8125rem;
   margin-top:.15rem
}

.addr-check-badge {
   position:absolute;
   top:.6rem;
   left:.6rem;
   width:20px;
   height:20px;
   border-radius:50%;
   background:#fff;
   border:1px solid var(--line);
   color:var(--olive);
   display:none;
   align-items:center;
   justify-content:center;
   font-size:.65rem
}

.addr-option-card:has(input:checked) {
   background:var(--olive);
   border-color:var(--olive);
   color:#fff
}

.addr-option-card:has(input:checked) .addr-option-sub {
   color:rgba(255,255,255,.8)
}

.addr-option-card:has(input:checked) .addr-check-badge {
   display:flex
}

.addr-option-new {
   border-style:dashed;
   display:flex;
   align-items:center;
   padding-left:2.1rem;
   color:var(--olive-d);
   font-weight:600
}

.addr-option-new:has(input:checked) {
   color:#fff
}

.checkout-summary {
   background:#f6f5f2;
   padding:1.5rem
}
.checkout-summary-item-img {
   width:56px;
   height:56px;
   object-fit:cover;
   flex:0 0 auto
}

.checkout-summary-row {
   display:flex;
   justify-content:space-between;
   gap:1rem;
   margin-bottom:.6rem
}

.checkout-summary-row.total {
   font-weight:700;
   font-size:1.05rem;
   margin-top:1rem;
   padding-top:1rem;
   border-top:1px solid var(--line)
}

.checkout-summary-header {
   cursor:pointer
}

.checkout-summary-toggle {
   display:none;
   align-items:center;
   gap:.5rem
}

.checkout-summary-chevron {
   transition:transform .25s ease;
   color:var(--olive-d)
}

.checkout-summary-header.is-open .checkout-summary-chevron {
   transform:rotate(180deg)
}

@media (max-width: 991.98px) {

  .checkout-summary-toggle {
      display:flex
   }

   .checkout-summary-details {
      overflow:hidden;
      max-height:0;
      opacity:0;
      transition:max-height .3s ease,opacity .25s ease,margin-top .3s ease;
   }

   .checkout-summary-details.is-open {
      max-height:2000px;
      opacity:1;
      margin-top:1.25rem
   }

}

.company-offer-hero {
   height:360px;
   background-size:cover;
   background-position:center;
   position:relative;
}

.company-offer-hero::before {
   content:'';
   position:absolute;
   inset:0;
   background:rgba(255,255,255,.35);
}

.company-offer-hero .container {
   position:relative;
   z-index:1
}

.company-offer-hero h1 {
   font-size:2.5rem;
   line-height:1.25;
   color:var(--ink)
}

@media (max-width:576px) {
   .company-offer-hero {
      height:260px
   }
   .company-offer-hero h1 {
      font-size:1.75rem
   }
}

.company-offer-section {
   color:var(--soft);
   padding:2.5rem 0;
   border-bottom:1px solid var(--line);
}

.company-offer-section:last-of-type {
   border-bottom:0
}

.company-offer-section p {
   margin-bottom:1rem
}

.company-offer-heading {
   margin-bottom:1.25rem
}

.company-offer-heading h2 {
   font-size:1.5rem;
   color:var(--ink)
}

.company-offer-heading-border {
   width:64px;
   height:3px;
   background:var(--olive);
   margin-top:.9rem
}

.company-offer-icon {
   width:100%;
   max-width:96px;
   aspect-ratio:1;
   object-fit:cover;
   margin:0 auto 1rem
}

.company-offer-icon-label {
   font-size:.8125rem;
   font-weight:600;
   text-transform:uppercase;
   letter-spacing:.03em;
   color:var(--ink)
}

.company-offer-gourmet {
   width:100%;
   aspect-ratio:1;
   object-fit:cover
}