
/* v21 — same hero composition on desktop/mobile, visible mobile nav, compact products */
.do-nav{
  background-color:rgba(255,252,247,.97)!important;
  background-image:
    radial-gradient(ellipse at 20px 11px, rgba(143,95,45,.14) 0 3px, transparent 4px),
    radial-gradient(ellipse at 37px 24px, rgba(182,128,69,.13) 0 3px, transparent 4px)!important;
  background-size:56px 36px!important;
}
.do-nav .container{position:relative!important}
@media(min-width:992px){
  .do-nav .navbar-collapse{position:relative!important;display:flex!important;justify-content:center!important}
  .do-nav .navbar-nav{position:absolute!important;left:50%!important;transform:translateX(-50%)!important;margin:0!important;gap:8px}
  .do-brand{margin-right:auto!important;margin-left:0!important}
  .do-order-btn{margin-right:auto!important}
}
.do-hero{min-height:92vh!important}
.do-hero .hero-static{object-fit:cover!important;object-position:center center!important}
.do-hero .hero-content-area{background:transparent!important}
.do-caption h1{white-space:nowrap!important}

.product-card{border-radius:16px!important;box-shadow:0 8px 22px rgba(61,47,32,.08)!important}
.product-card .media{height:158px!important}
.product-card .body{padding:14px!important}
.product-card h3{font-size:.98rem!important;margin-bottom:7px!important}
.product-card .desc{font-size:.81rem!important;line-height:1.75!important;min-height:0!important}
.product-card .ingredients{font-size:.72rem!important;line-height:1.65!important;padding-top:8px!important;margin-top:8px!important}
.product-card .btn{margin-top:10px!important;padding:.42rem .7rem!important;font-size:.79rem!important}
.product-card:hover{transform:translateY(-2px)!important}

@media(max-width:991px){
  .do-nav .navbar-toggler{display:none!important}
  .do-nav .container{min-height:70px!important;display:flex!important;align-items:center!important;flex-wrap:wrap!important}
  .do-brand{order:1!important;margin:0 auto 0 0!important}
  .do-nav .navbar-collapse{
    display:block!important;visibility:visible!important;opacity:1!important;
    order:3!important;flex-basis:100%!important;width:100%!important;
    padding:5px 0 7px!important;background:transparent!important;border-radius:0!important;
    overflow-x:auto!important;white-space:nowrap!important;
  }
  .do-nav .navbar-nav{
    display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
    width:max-content!important;min-width:100%!important;justify-content:center!important;
    gap:2px!important;margin:0!important;padding:0!important;
  }
  .do-nav .nav-link{font-size:.77rem!important;padding:7px 9px!important;white-space:nowrap!important}
  .do-order-btn{display:none!important}
  .do-hero{
    min-height:0!important;
    padding-top:116px!important;
    background:#fff!important;
    overflow:hidden!important;
    aspect-ratio:auto!important;
  }
  .do-hero .hero-media-container{
    position:relative!important;inset:auto!important;width:100%!important;height:auto!important;
    aspect-ratio:16/9!important;background:#fff!important;overflow:hidden!important;
  }
  .do-hero .hero-static{
    width:100%!important;height:100%!important;object-fit:contain!important;
    object-position:center center!important;background:#fff!important;
  }
  .do-hero .hero-content-area{
    position:absolute!important;inset:116px 0 auto 0!important;height:calc((100vw)*.5625)!important;
    background:transparent!important;padding:0!important;display:block!important;
  }
  .do-hero .do-caption{
    position:absolute!important;top:50%!important;right:5vw!important;left:auto!important;
    transform:translateY(-50%)!important;width:50vw!important;max-width:none!important;
    margin:0!important;padding:0!important;text-align:right!important;
  }
  .do-hero .do-caption h1{
    font-size:clamp(1.45rem,7.3vw,2.7rem)!important;line-height:1.05!important;
    white-space:nowrap!important;text-shadow:0 2px 9px rgba(0,0,0,.62)!important;
  }
  .do-hero .do-caption .eyebrow{
    font-size:clamp(.72rem,3.4vw,.95rem)!important;text-shadow:0 2px 8px rgba(0,0,0,.6)!important;
  }
  .hero-smoke{left:19%!important;top:27%!important}
  .do-products{padding-top:24px!important;padding-bottom:30px!important}
  .product-card .media{height:126px!important}
  .product-card .body{padding:10px!important}
  .product-card h3{font-size:.86rem!important}
  .product-card .desc{font-size:.72rem!important;line-height:1.6!important}
  .product-card .ingredients{display:none!important}
  .product-card .btn{font-size:.7rem!important;padding:.38rem .45rem!important}
}
@media(max-width:575px){
  #productGrid>[class*="col-"]{width:50%!important}
  .product-card .media{height:112px!important}
  .do-nav .nav-link{font-size:.72rem!important;padding:6px 7px!important}
}

/* v22 footer compact */
.do-footer{padding:22px 0 14px!important}
.do-footer .row{row-gap:12px!important}
.footer-logo-clean{width:84px!important;height:84px!important;object-fit:contain!important;display:block!important;margin:0!important}
.do-footer h5{margin-bottom:8px!important;font-size:.95rem!important}
.do-footer p{margin-bottom:8px!important;font-size:.82rem!important}
.do-footer .footer-links{margin:0!important}
.do-footer .footer-links li{margin-bottom:3px!important}
.do-footer .footer-links a{font-size:.82rem!important}
.do-footer hr{margin-top:14px!important;margin-bottom:10px!important}
.do-footer .container>p{font-size:.75rem!important}
@media(max-width:767px){
  .do-footer{padding:16px 0 10px!important}
  .footer-logo-clean{width:66px!important;height:66px!important;margin:0 auto 4px!important}
  .do-footer .row{text-align:center!important;row-gap:10px!important}
  .do-footer .footer-links{padding:0!important}
  .do-footer .btn{padding:.34rem .7rem!important;font-size:.75rem!important}
}

/* v23 mobile = exact desktop composition, miniaturized */
html.mobile-desktop-mini .do-nav .navbar-toggler{display:none!important}
html.mobile-desktop-mini .do-nav .navbar-collapse{display:flex!important;visibility:visible!important;opacity:1!important}
html.mobile-desktop-mini .do-nav .container{min-height:88px!important;display:flex!important;align-items:center!important;flex-wrap:nowrap!important;position:relative!important}
html.mobile-desktop-mini .do-brand{margin-right:auto!important;margin-left:0!important}
html.mobile-desktop-mini .do-nav .navbar-nav{position:absolute!important;left:50%!important;transform:translateX(-50%)!important;display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;width:auto!important;min-width:0!important;gap:8px!important;margin:0!important;padding:0!important}
html.mobile-desktop-mini .do-nav .nav-link{font-size:1rem!important;padding:.5rem 1rem!important;white-space:nowrap!important}
html.mobile-desktop-mini .do-order-btn{display:inline-flex!important;margin-right:auto!important}
html.mobile-desktop-mini .do-hero{min-height:92vh!important;padding-top:0!important;background:#fff!important;overflow:hidden!important}
html.mobile-desktop-mini .do-hero .hero-media-container{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;aspect-ratio:auto!important;background:#fff!important;overflow:hidden!important}
html.mobile-desktop-mini .do-hero .hero-static{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important}
html.mobile-desktop-mini .do-hero .hero-content-area{position:absolute!important;inset:0!important;height:100%!important;padding:0!important;background:transparent!important}
html.mobile-desktop-mini .do-hero .do-caption{position:absolute!important;top:50%!important;right:6vw!important;left:auto!important;transform:translateY(-50%)!important;width:min(520px,42vw)!important;max-width:520px!important;text-align:right!important}
html.mobile-desktop-mini .do-hero .do-caption h1{font-size:clamp(3rem,8vw,6.7rem)!important;white-space:nowrap!important}
html.mobile-desktop-mini .do-hero .do-caption .eyebrow{font-size:1.05rem!important}
html.mobile-desktop-mini #productGrid>[class*="col-"]{width:33.33333333%!important}
html.mobile-desktop-mini .product-card .media{height:158px!important}
html.mobile-desktop-mini .product-card .body{padding:14px!important}
html.mobile-desktop-mini .product-card .ingredients{display:block!important}
html.mobile-desktop-mini .do-footer .row{text-align:right!important}
html.mobile-desktop-mini .footer-logo-clean{width:84px!important;height:84px!important;margin:0!important}


/* v29 Persian arabesque side rails - desktop only */
.do-side-ornament{position:fixed;top:96px;bottom:18px;width:42px;z-index:6;pointer-events:none;opacity:.28;background-repeat:repeat-y;background-size:42px 88px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='88' viewBox='0 0 42 88'%3E%3Cg fill='none' stroke='%23835f3b' stroke-width='1.5'%3E%3Cpath d='M21 5C7 16 9 34 22 37c11 3 14-12 6-18-6-5-13 0-11 7 2 6 10 5 13 1'/%3E%3Cpath d='M20 42C34 52 32 72 19 77 8 81 3 67 11 59c6-6 14-2 13 6-1 6-9 7-13 3'/%3E%3Cpath d='M21 0v88' opacity='.28'/%3E%3C/g%3E%3C/svg%3E")}
.do-side-right{right:7px}.do-side-left{left:7px;transform:scaleX(-1)}
html.mobile-desktop-mini .do-side-ornament{display:none!important}
@media(max-width:991px){.do-side-ornament{display:none!important}}
