.elementor-1580 .elementor-element.elementor-element-2c2197c3{--display:flex;--position:fixed;--min-height:100vh;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:hidden;--padding-top:0px;--padding-bottom:0px;--padding-left:30px;--padding-right:0px;top:0px;}.elementor-1580 .elementor-element.elementor-element-2c2197c3 .elementor-background-slideshow__slide__image{background-size:auto;background-position:center center;}body:not(.rtl) .elementor-1580 .elementor-element.elementor-element-2c2197c3{left:0px;}body.rtl .elementor-1580 .elementor-element.elementor-element-2c2197c3{right:0px;}.elementor-1580 .elementor-element.elementor-element-6f12ac6b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1580 .elementor-element.elementor-element-2b9658fb{--display:flex;--position:absolute;--min-height:600px;--justify-content:space-between;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );top:0px;--z-index:100;}body:not(.rtl) .elementor-1580 .elementor-element.elementor-element-2b9658fb{left:0px;}body.rtl .elementor-1580 .elementor-element.elementor-element-2b9658fb{right:0px;}.elementor-1580 .elementor-element.elementor-element-581d586e{--display:flex;--justify-content:space-between;}.elementor-1580 .elementor-element.elementor-element-21f61b25{--display:flex;}.elementor-1580 .elementor-element.elementor-element-73a321d4{--display:flex;}.elementor-1580 .elementor-element.elementor-element-23b6646b .elementor-heading-title{font-family:"Anton", Sans-serif;font-size:30px;font-weight:400;letter-spacing:5.6px;color:#FFFFFF;}.elementor-1580 .elementor-element.elementor-element-2f42f796 .elementor-heading-title{font-family:"Anton", Sans-serif;font-size:30px;font-weight:400;letter-spacing:5.6px;color:#FFFFFF;}.elementor-1580 .elementor-element.elementor-element-12e2b10c .elementor-heading-title{font-family:"Anton", Sans-serif;font-size:30px;font-weight:400;letter-spacing:5.6px;color:#FFFFFF;}.elementor-1580 .elementor-element.elementor-element-ab8d4 .elementor-heading-title{font-family:"Anton", Sans-serif;font-size:30px;font-weight:400;letter-spacing:5.6px;color:#FFFFFF;}.elementor-1580 .elementor-element.elementor-element-691e6476 .elementor-heading-title{font-family:"Anton", Sans-serif;font-size:30px;font-weight:400;letter-spacing:5.6px;color:#FFFFFF;}.elementor-1580 .elementor-element.elementor-element-18a51f2{--iteration-count:infinite;--animation-duration:1200ms;--dynamic-text-color:#FFFFFF;}.elementor-1580 .elementor-element.elementor-element-18a51f2 .elementor-headline{text-align:center;font-family:"Sacramento", Sans-serif;}.elementor-1580 .elementor-element.elementor-element-18a51f2 .elementor-headline-plain-text{color:#FFFFFF;}.elementor-1580 .elementor-element.elementor-element-18a51f2 .elementor-headline-dynamic-text{font-family:"Anton", Sans-serif;}.elementor-1580 .elementor-element.elementor-element-c5d0ef1{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0%;--padding-bottom:0%;--padding-left:5%;--padding-right:0%;--z-index:10;}.elementor-1580 .elementor-element.elementor-element-c5d0ef1:not(.elementor-motion-effects-element-type-background), .elementor-1580 .elementor-element.elementor-element-c5d0ef1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://sevenyummy.com/wp-content/uploads/2025/09/12.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-1580 .elementor-element.elementor-element-34aaa20d{--display:flex;}.elementor-1580 .elementor-element.elementor-element-19e0bb9b .elementor-heading-title{font-family:"Anton", Sans-serif;font-size:30px;font-weight:400;letter-spacing:5.6px;color:#FFFFFF;}.elementor-1580 .elementor-element.elementor-element-103b1f21 .elementor-heading-title{font-family:"Anton", Sans-serif;font-size:30px;font-weight:400;letter-spacing:5.6px;color:#FFFFFF;}.elementor-1580 .elementor-element.elementor-element-224dc086 .elementor-heading-title{font-family:"Anton", Sans-serif;font-size:40px;font-weight:400;letter-spacing:5.6px;color:#FFFFFF;}.elementor-1580 .elementor-element.elementor-element-2714b35 .elementor-heading-title{font-family:"Anton", Sans-serif;font-size:30px;font-weight:400;letter-spacing:5.6px;color:#FFFFFF;}.elementor-1580 .elementor-element.elementor-element-5893190 .elementor-heading-title{font-family:"Anton", Sans-serif;font-size:30px;font-weight:400;letter-spacing:5.6px;color:#FFFFFF;}.elementor-1580 .elementor-element.elementor-element-6ba24772{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -30px) 0px;z-index:10;}.elementor-1580 .elementor-element.elementor-element-6ba24772.elementor-arrows-yes .elementor-main-swiper{width:calc( 1400px - 40px );}.elementor-1580 .elementor-element.elementor-element-6ba24772 .elementor-main-swiper{width:1400px;}.elementor-1580 .elementor-element.elementor-element-6ba24772 .elementor-main-swiper .swiper-slide{padding:15px 15px 20px 15px;}.elementor-1580 .elementor-element.elementor-element-6ba24772 .elementor-swiper-button{font-size:20px;}.elementor-1580 .elementor-element.elementor-element-3db4c97{--display:flex;}.elementor-1580 .elementor-element.elementor-element-54b4a5b{color:#FFFFFF;}.elementor-1580 .elementor-element.elementor-element-6b6a01b .elementor-button{background-color:#FF0000;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-1580 .elementor-element.elementor-element-6f12ac6b{--width:36%;}.elementor-1580 .elementor-element.elementor-element-2b9658fb{--width:30px;}.elementor-1580 .elementor-element.elementor-element-c5d0ef1{--width:64%;}}@media(max-width:767px){.elementor-1580 .elementor-element.elementor-element-2c2197c3{--min-height:100vh;--padding-top:20px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1580 .elementor-element.elementor-element-2b9658fb{--width:220px;--min-height:30px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}body:not(.rtl) .elementor-1580 .elementor-element.elementor-element-2b9658fb{left:50%;}body.rtl .elementor-1580 .elementor-element.elementor-element-2b9658fb{right:50%;}.elementor-1580 .elementor-element.elementor-element-73a321d4{--min-height:0px;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:64px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1580 .elementor-element.elementor-element-23b6646b .elementor-heading-title{font-size:30px;}.elementor-1580 .elementor-element.elementor-element-2f42f796 .elementor-heading-title{font-size:30px;}.elementor-1580 .elementor-element.elementor-element-12e2b10c .elementor-heading-title{font-size:30px;}.elementor-1580 .elementor-element.elementor-element-ab8d4 .elementor-heading-title{font-size:30px;}.elementor-1580 .elementor-element.elementor-element-691e6476 .elementor-heading-title{font-size:30px;}.elementor-1580 .elementor-element.elementor-element-c5d0ef1{--margin-top:-85px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-1580 .elementor-element.elementor-element-1f190749{margin:-233px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-1580 .elementor-element.elementor-element-34aaa20d{--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-1580 .elementor-element.elementor-element-6ba24772.elementor-arrows-yes .elementor-main-swiper{width:calc( 100% - 40px );}.elementor-1580 .elementor-element.elementor-element-6ba24772 .elementor-main-swiper{width:100%;}}/* Start custom CSS for container, class: .elementor-element-2b9658fb */.elementor-1580 .elementor-element.elementor-element-2b9658fb{
    --dot-size: 23px;
    --line-color: #D8D9D8;
    --dot-color: #D8D9D8;
    --dot-color-active: #D8D9D8;
    color: #2A2F2F;
    font-size: 13px;
    font-weight: bold;
}
.elementor-1580 .elementor-element.elementor-element-2b9658fb{
    height: 80vh;
    height: var(--min-height);
    max-height: 80vh;
    min-height: 0 !important;
}
.elementor-1580 .elementor-element.elementor-element-2b9658fb .dot{
    height: var(--dot-size);
    width: var(--dot-size);
    background: var(--dot-color);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transform: scale(0.3);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}
.elementor-1580 .elementor-element.elementor-element-2b9658fb .dot-number{
    opacity: 0;
    transition: all 0.3s ease-in-out;
}
.elementor-1580 .elementor-element.elementor-element-2b9658fb .dot.active{
    transform: scale(1);
    background: var(--dot-color-active);
}
.elementor-1580 .elementor-element.elementor-element-2b9658fb .dot.active .dot-number{
    opacity: 1;
}
.elementor-1580 .elementor-element.elementor-element-2b9658fb:before{
    content: "";
    position: absolute;
    top: 50%;
    height: calc(100% - 20px);
    max-height: 90vh;
    width: 1px;
    background: var(--line-color);
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

@media (max-width: 767px){
.elementor-1580 .elementor-element.elementor-element-2b9658fb{
    transform: translateX(-50%);
    flex-wrap: nowrap !important;
}
.elementor-1580 .elementor-element.elementor-element-2b9658fb:before {
    width: calc(100% - 20px);
    height: 1px;

}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-73a321d4 */.elementor-1580 .elementor-element.elementor-element-73a321d4{
    --speed: 0.8s;
    --gap: 40px;
}
.elementor-1580 .elementor-element.elementor-element-73a321d4{
    transition: all 0.3s ease-in-out;
    height: var(--h);
    --height: calc(var(--h) + var(--gap));
    overflow: hidden !important;
}
.elementor-1580 .elementor-element.elementor-element-73a321d4 .elementor-widget{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.elementor-1580 .elementor-element.elementor-element-73a321d4 .elementor-widget > *{
    transform: translateY(calc(-10 * var(--height)));
    transition: none !important;
}
.elementor-1580 .elementor-element.elementor-element-73a321d4 .elementor-widget.prev > *{
    animation: prev var(--speed) ease-in-out;
    transform: translateY(calc(-1 * var(--height)));
}
.elementor-1580 .elementor-element.elementor-element-73a321d4 .elementor-widget.next > *{
    animation: next var(--speed) ease-in-out;
    transform: translateY(var(--height));
}
.elementor-1580 .elementor-element.elementor-element-73a321d4 .elementor-widget.currentUp,
.elementor-1580 .elementor-element.elementor-element-73a321d4 .elementor-widget.currentDown{
    z-index: 1;
}
.elementor-1580 .elementor-element.elementor-element-73a321d4 .elementor-widget.currentUp > *{
    animation: currentUp var(--speed) ease-in-out;
    transform: translateY(0);
}
.elementor-1580 .elementor-element.elementor-element-73a321d4 .elementor-widget.currentDown > *{
    animation: currentDown var(--speed) ease-in-out;
    transform: translateY(0);
}

@keyframes prev {
  0%   {transform: translateY(0);}
  100%   {transform: translateY(calc(-1 * var(--height)));}
}

@keyframes next {
  0%   {transform: translateY(0);}
  100%   {transform: translateY(var(--height));}
}

@keyframes currentUp {
  0%   {transform: translateY(var(--height));}
  100%   {transform: translateY(0);}
}

@keyframes currentDown {
  0%   {transform: translateY(calc(-1 * var(--height)));}
  100%   {transform: translateY(0);}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-34aaa20d */.elementor-1580 .elementor-element.elementor-element-34aaa20d{
    --speed: 0.6s;
    --gap: 40px;
}
.elementor-1580 .elementor-element.elementor-element-34aaa20d{
    transition: all 0.3s ease-in-out;
    height: var(--h);
    --height: calc(var(--h) + var(--gap));
    overflow: hidden !important;
}
.elementor-1580 .elementor-element.elementor-element-34aaa20d .elementor-widget{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.elementor-1580 .elementor-element.elementor-element-34aaa20d .elementor-widget > *{
    transform: translateY(calc(-10 * var(--height)));
    transition: none !important;
}
.elementor-1580 .elementor-element.elementor-element-34aaa20d .elementor-widget.prev > *{
    animation: prev var(--speed) ease-in-out;
    transform: translateY(calc(-1 * var(--height)));
}
.elementor-1580 .elementor-element.elementor-element-34aaa20d .elementor-widget.next > *{
    animation: next var(--speed) ease-in-out;
    transform: translateY(var(--height));
}
.elementor-1580 .elementor-element.elementor-element-34aaa20d .elementor-widget.currentUp,
.elementor-1580 .elementor-element.elementor-element-34aaa20d .elementor-widget.currentDown{
    z-index: 1;
}
.elementor-1580 .elementor-element.elementor-element-34aaa20d .elementor-widget.currentUp > *{
    animation: currentUp var(--speed) ease-in-out;
    transform: translateY(0);
}
.elementor-1580 .elementor-element.elementor-element-34aaa20d .elementor-widget.currentDown > *{
    animation: currentDown var(--speed) ease-in-out;
    transform: translateY(0);
}

@keyframes prev {
  0%   {transform: translateY(0);}
  100%   {transform: translateY(calc(-1 * var(--height)));}
}

@keyframes next {
  0%   {transform: translateY(0);}
  100%   {transform: translateY(var(--height));}
}

@keyframes currentUp {
  0%   {transform: translateY(var(--height));}
  100%   {transform: translateY(0);}
}

@keyframes currentDown {
  0%   {transform: translateY(calc(-1 * var(--height)));}
  100%   {transform: translateY(0);}
}/* End custom CSS */
/* Start custom CSS for testimonial-carousel, class: .elementor-element-6ba24772 */.elementor-1580 .elementor-element.elementor-element-6ba24772{
    --radius: 8px;
    --height: 320px;
    --active-height: 360px;
    --overlay: 0.75;
}
.elementor-1580 .elementor-element.elementor-element-6ba24772{
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.8s ease-in-out;
}
.elementor-1580 .elementor-element.elementor-element-6ba24772.loaded{
    opacity: 1;
    transform: translateX(0);
}

.elementor-1580 .elementor-element.elementor-element-6ba24772 .swiper-wrapper{
    height: var(--active-height);
    align-items: center;
}
.elementor-1580 .elementor-element.elementor-element-6ba24772:not(.loaded) .swiper-wrapper{
    transition-duration: 0s !important;
}
.elementor-1580 .elementor-element.elementor-element-6ba24772 .swiper-slide{
    display: flex;
    align-items: flex-end;
    border-radius: var(--radius);
    height: var(--height);
    box-shadow: 0 0 50px rgba(0,0,0,0.15);
}
.elementor-1580 .elementor-element.elementor-element-6ba24772.loaded .swiper-slide{
    transition: all 0.3s ease-in-out 0.2s;
}
.elementor-1580 .elementor-element.elementor-element-6ba24772 .swiper-slide.swiper-slide-active{
    height: var(--active-height);
}
.elementor-1580 .elementor-element.elementor-element-6ba24772 .swiper-slide:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: rgb(0,0,0);
    background: linear-gradient(20deg, rgba(0,0,0,var(--overlay)) 0%, rgba(0,0,0,0) 100%);
    height: 100%;
    width: 100%;
    z-index: 1;
}
.elementor-1580 .elementor-element.elementor-element-6ba24772 .elementor-testimonial__footer{
    display: block;
}
.elementor-1580 .elementor-element.elementor-element-6ba24772 img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
}
.elementor-1580 .elementor-element.elementor-element-6ba24772 .elementor-testimonial__cite{
    z-index: 2;
    position: relative;
}
.elementor-1580 .elementor-element.elementor-element-6ba24772 .elementor-testimonial__name{
    margin-bottom: 5px;
}
.elementor-1580 .elementor-element.elementor-element-6ba24772 .swiper-pagination,
.elementor-1580 .elementor-element.elementor-element-6ba24772 .elementor-swiper-button{
    display: none;
}
.elementor-1580 .elementor-element.elementor-element-6ba24772 .swiper-container{
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1024px){
.elementor-1580 .elementor-element.elementor-element-6ba24772{
    --height: 180px;
    --active-height: 250px;
}
}
@media (max-width: 767px){
.elementor-1580 .elementor-element.elementor-element-6ba24772{
    --height: 120px;
    --active-height: 140px;
    width: 100% !important;
    max-width: var(--container-widget-width, 300px) !important;
}
.elementor-1580 .elementor-element.elementor-element-6ba24772 .elementor-testimonial__cite{
    opacity: 0;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2c2197c3 */.elementor-1580 .elementor-element.elementor-element-2c2197c3{ 
  background: linear-gradient(90deg, #929AAB, #393E46); 
  --background-speed: 0.5s; 
} 

.elementor-1580 .elementor-element.elementor-element-2c2197c3 .elementor-background-slideshow{ 
  display: none; 
} 

.elementor-1580 .elementor-element.elementor-element-2c2197c3 .as-slider-background, 
.elementor-1580 .elementor-element.elementor-element-2c2197c3 .as-slider-background img{ 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  transition: all 1s ease-in-out; 
} 

/* ✅ OPEN LEFT SIDE COMPLETELY */
.elementor-1580 .elementor-element.elementor-element-2c2197c3 .as-slider-background::before { 
  content: ""; 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 0 !important;   /* remove overlay width */
  height: 100%; 
  background: none !important; /* no dark gradient */
  z-index: 2; 
  pointer-events: none; 
}

.elementor-1580 .elementor-element.elementor-element-2c2197c3 .as-slider-background img{ 
  width: 40%; 
  object-fit: cover; 
  opacity: 0; 
  transform: scale(1.1); 
} 

.elementor-1580 .elementor-element.elementor-element-2c2197c3 .as-slider-background img.prev, 
.elementor-1580 .elementor-element.elementor-element-2c2197c3 .as-slider-background img.currentBackward, 
.elementor-1580 .elementor-element.elementor-element-2c2197c3 .as-slider-background img.currentForward{ 
  opacity: 1; 
  transform: scale(1.1); 
} 

.elementor-1580 .elementor-element.elementor-element-2c2197c3 .as-slider-background img.currentBackward, 
.elementor-1580 .elementor-element.elementor-element-2c2197c3 .as-slider-background img.currentForward{ 
  z-index: 1; 
  opacity: 1; 
  animation: bgNext var(--background-speed) linear; 
  transition: all 1s ease-in-out; 
  transform: scale(1); 
} 

.elementor-1580 .elementor-element.elementor-element-2c2197c3:before{ 
  z-index: 2; 
} 

.elementor-1580 .elementor-element.elementor-element-2c2197c3 > .elementor-element{ 
  z-index: 3; 
} 

.elementor-1580 .elementor-element.elementor-element-2c2197c3 .as-bar, 
.elementor-1580 .elementor-element.elementor-element-2c2197c3 .as-slider-left, 
.elementor-1580 .elementor-element.elementor-element-2c2197c3 .as-slider-right{ 
  opacity: 0; 
  transition: all 0.8s ease-in-out; 
} 

.elementor-1580 .elementor-element.elementor-element-2c2197c3.loaded .as-bar, 
.elementor-1580 .elementor-element.elementor-element-2c2197c3.loaded .as-slider-left, 
.elementor-1580 .elementor-element.elementor-element-2c2197c3.loaded .as-slider-right{ 
  opacity: 1; 
} 

@keyframes bgNext { 
  0% {opacity: 0; transform: scale(1.1);} 
  100% {opacity: 1; transform: scale(1);} 
} 

@media (min-width: 768px){ 
  .elementor-1580 .elementor-element.elementor-element-2c2197c3 .as-bar, 
  .elementor-1580 .elementor-element.elementor-element-2c2197c3 .as-slider-left, 
  .elementor-1580 .elementor-element.elementor-element-2c2197c3 .as-slider-right{ 
    position: relative; 
  } 
} 

@media (max-width: 1380px) and (min-width: 768px){ 
  .elementor-1580 .elementor-element.elementor-element-2c2197c3{ 
    padding-left: 4%; 
    padding-right: 4%; 
  } 
} 

@media (max-width: 1024px){ 
  .elementor-1580 .elementor-element.elementor-element-2c2197c3 .as-slider-background img{ 
    width: 60%; 
  } 
} 

@media (max-width: 767px){ 
  .elementor-1580 .elementor-element.elementor-element-2c2197c3 .as-slider-left{ 
    left: calc(50% - 300px/2) !important; 
  } 
  .elementor-1580 .elementor-element.elementor-element-2c2197c3 .as-slider-right{ 
    right: calc(50% - 300px/2) !important; 
  } 
  .elementor-1580 .elementor-element.elementor-element-2c2197c3 .as-slider-background img{ 
    width: 100%; 
  } 
}/* End custom CSS */
/* Start custom CSS *//* style.css - Seven Yummy Dashboard
   Mobile-first responsive dashboard.
   Use CSS variables for brand colors and easy theming.
   Drop into theme or have plugin enqueue this file.
*/

/* CSS variables */
:root{
  --sy-bg: #ffffff;
  --sy-fg: #111111;
  --sy-muted: #6b6b6b;
  --sy-accent: #6aa84f; /* natural accent (green) */
  --sy-border: #e6e6e6;
  --sy-radius: 8px;
  --sy-gap: 12px;
  --sy-max-width: 1100px;
  --sy-shadow: 0 6px 18px rgba(17,17,17,0.06);
  --sy-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --sy-transition: 180ms ease;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body.sy-body{
  font-family:var(--sy-font-sans);
  margin:0;
  background:var(--sy-bg);
  color:var(--sy-fg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.35;
}

/* Accessibility helper */
.sr-only{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Header */
.sy-header{
  border-bottom:1px solid var(--sy-border);
  background:linear-gradient(180deg, #fff, #fafafa);
  position:sticky;top:0;z-index:40;
}
.sy-header-inner{
  max-width:var(--sy-max-width);
  margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:14px;
  gap:var(--sy-gap);
}
.sy-brand{display:flex;align-items:center;gap:10px}
.sy-logo{
  width:42px;height:42px;border-radius:10px;background:var(--sy-fg);color:var(--sy-bg);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;
}
.sy-title{font-size:18px;margin:0}
.sy-header-actions{display:flex;gap:10px;align-items:center}
.icon-btn{background:transparent;border:0;font-size:18px;cursor:pointer}

/* Layout */
.sy-layout{
  display:flex;flex-direction:column;
  max-width:var(--sy-max-width);
  margin:18px auto;padding:0 12px;
  gap:16px;
}

/* Sidebar - mobile collapsible pattern */
.sy-sidebar{
  order:2;
  background:transparent;
}
.sy-nav{display:flex;gap:8px;overflow:auto;padding:0;margin:0;list-style:none}
.sy-nav .nav-item{
  background:transparent;border:1px solid var(--sy-border);padding:8px 12px;border-radius:999px;
  cursor:pointer;color:var(--sy-fg);font-weight:600;
}
.sy-nav .nav-item.active{background:var(--sy-accent);color:#fff;border-color:var(--sy-accent)}

/* Main area */
.sy-main{order:1}
.view-section{padding:8px 0;margin-bottom:18px}
.view-header{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.view-header h3{margin:0;font-size:18px}
.muted{color:var(--sy-muted);font-size:13px}

/* Dog cards */
.dog-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.dog-card{
  display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--sy-border);
  border-radius:var(--sy-radius);box-shadow:var(--sy-shadow);background:white;
}
.dog-avatar{font-size:30px}
.dog-info h4{margin:0;font-size:16px}
.dog-actions{margin-left:auto;display:flex;gap:6px}
.btn-small{padding:6px 8px;border-radius:6px;border:1px solid var(--sy-border);background:transparent;cursor:pointer}

/* Active dog & quick calc */
.active-dog{margin-top:12px;padding:12px;border-radius:var(--sy-radius);border:1px dashed var(--sy-border)}
.feeding-quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.feeding-quick input, .feeding-quick select{padding:8px;border-radius:8px;border:1px solid var(--sy-border);min-width:120px}
.btn{background:var(--sy-fg);color:#fff;padding:8px 12px;border-radius:8px;border:0;cursor:pointer}
.btn-primary{background:var(--sy-accent);border:0;color:#fff;padding:8px 12px;border-radius:8px}

/* Feeding table */
.feeding-table-wrap{overflow:auto}
.feeding-table{width:100%;border-collapse:collapse;margin-top:8px}
.feeding-table th, .feeding-table td{padding:10px;border-bottom:1px solid var(--sy-border);text-align:left}
.feeding-table th{font-size:13px;color:var(--sy-muted)}

/* Orders */
.order-item{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--sy-border);border-radius:8px;margin-bottom:8px}
.order-meta{min-width:120px}
.order-actions{margin-left:auto;display:flex;gap:8px}

/* Reminders */
.reminder-form{display:flex;flex-direction:column;gap:8px;max-width:380px}
.reminder-list{list-style:none;padding:0;margin-top:12px}
.reminder-list li{padding:8px;border:1px solid var(--sy-border);border-radius:8px;margin-bottom:8px;display:flex;justify-content:space-between}

/* Modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.35);padding:16px}
.modal[aria-hidden="false"]{display:flex}
.modal-panel{background:white;padding:16px;border-radius:12px;max-width:500px;width:100%}
.modal-close{background:transparent;border:0;position:absolute;right:16px;top:16px;cursor:pointer}

/* Responsive: tablets & up */
@media(min-width:720px){
  .sy-layout{flex-direction:row;align-items:flex-start}
  .sy-sidebar{width:220px;order:1}
  .sy-main{flex:1;order:2;padding-left:16px}
  .dog-cards{grid-template-columns:repeat(3,1fr)}
}

/* Desktop */
@media(min-width:1000px){
  .dog-cards{grid-template-columns:repeat(4,1fr)/* End custom CSS */