/* Buck Naked Kitchen — local theme
   Matches existing IDs/classes in index.html. Does not depend on Shopify CSS. */

:root {
  --cream: #f6f1ea;
  --paper: #fffdf9;
  --ink: #2c2926;
  --muted: #6f6a64;
  --line: #e6dfd5;
  --peach: #ecae94;
  --terracotta: #c4785b;
  --sage: #6d7f66;
  --shadow: 0 12px 40px rgba(44, 41, 38, 0.08);
  --radius: 18px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body.template-index {
  margin: 0;
  font-family: Lato, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 500px at 50% -80px, rgba(236, 174, 148, 0.18), transparent 60%),
    var(--cream);
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--terracotta);
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

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

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hide {
  display: none !important;
}

.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.hr--clear {
  border: 0;
  height: 8px;
  background: transparent;
  margin: 8px 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 28px auto;
}

/* Layout utilities */
.grid {
  margin-left: -20px;
}

.grid:after,
.grid--uniform:after,
.index-wrap:after,
#menos-chest:after {
  content: "";
  display: table;
  clear: both;
}

.grid__item {
  float: left;
  padding-left: 20px;
  width: 100%;
}

.shadow {
  color: var(--ink) !important;
}

/* Header */
#menos-head {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 72px !important;
  z-index: 1000;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  background: rgba(255, 253, 249, 0.92) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(230, 223, 213, 0.9);
  box-shadow: 0 8px 24px rgba(44, 41, 38, 0.04);
}

#menos-head .left {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 0 18px;
  float: none;
}

#menos-head .right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0 18px 0 0;
  float: none;
}

#menos-head a {
  margin: 0 6px;
}

.header-btn-large,
.adjacent-menu,
.main-menu {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink) !important;
  padding: 10px 8px;
  border-bottom: 2px solid transparent;
}

.header-btn-large:hover,
.adjacent-menu:hover,
.main-menu:hover {
  color: var(--terracotta) !important;
}

.head-active-link {
  font-weight: 900;
  border-bottom: 2px solid var(--ink);
}

#menos-toggle-left-hand {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px;
  cursor: pointer;
}

#menos-toggle-left-hand path[fill="#333"] {
  fill: var(--ink);
}

/* Centered script logo */
#menos-eye {
  position: fixed;
  top: 10px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: min(280px, 70vw);
  height: auto;
  z-index: 1001;
  text-align: center;
  pointer-events: none;
}

.buck-eye {
  pointer-events: auto;
  display: inline-block;
  font-family: Sacramento, cursive;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 400 !important;
  line-height: 1;
  color: var(--ink) !important;
  text-decoration: none;
}

.buck-eye:hover {
  color: var(--terracotta) !important;
}

/* Mobile drawer */
#menos-left-hand {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100%;
  background: var(--paper);
  z-index: 10000;
  padding-top: 88px;
  border-right: 1px solid var(--line);
  box-shadow: 16px 0 40px rgba(44, 41, 38, 0.08);
  transform: translateX(-100%);
  transition: transform 0.28s ease;
}

#menos-left-hand.is-hiding {
  transform: translateX(-100%);
}

#menos-left-hand.is-open,
body.nav-open #menos-left-hand {
  transform: translateX(0);
}

#menos-left-hand a.menos-finger {
  display: block;
  padding: 14px 28px;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
}

#menos-left-hand a.menos-finger:hover {
  background: var(--cream);
  color: var(--terracotta);
}

.bottom-link-back {
  display: none;
}

body.nav-open #the-sun {
  position: fixed;
  inset: 0;
  background: rgba(44, 41, 38, 0.38);
  z-index: 9999;
}

/* Buttons */
.Polaris-Button,
.btn,
input[type="submit"],
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  font-family: Lato, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.Polaris-Button:hover,
.btn:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: #fff;
  transform: translateY(-1px);
}

.Polaris-Button--outline,
.Polaris-Button--outline.btn-large {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.Polaris-Button--outline:hover {
  background: var(--ink);
  color: #fff;
}

.Polaris-Button--primary {
  background: var(--terracotta);
  border-color: var(--terracotta);
}

.Polaris-Button--primary:hover {
  background: var(--ink);
  border-color: var(--ink);
}

.btn-large {
  min-width: 152px;
}

/* Hide unused cart chrome */
.menos-cart-bubble,
.menos-mobile-cart-bubble {
  display: none !important;
}

/* Page canvas */
#menos-blanket {
  display: block;
  max-width: 1240px;
  margin: 0 auto;
  padding: 108px 24px 40px;
}

#menos-chest {
  width: 100%;
  padding: 0;
}

.index-wrap {
  max-width: 1200px;
  margin: 0 auto;
}

.menos-breadcrumb {
  display: none;
}

/* Hero tiles */
.slide-buck {
  position: relative;
  height: 0;
  padding-bottom: 28%;
  margin-bottom: 16px;
  overflow: hidden;
  background-color: #d8c4b4;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: var(--radius);
}

.slide-buck > a {
  position: absolute;
  inset: 0;
  display: block;
}

.slide-buck .menos-border {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 12px;
}

.slide-buck::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(44, 41, 38, 0.05), rgba(44, 41, 38, 0.38));
  pointer-events: none;
  transition: background 0.3s ease;
}

.slide-buck:hover::after {
  background: linear-gradient(180deg, rgba(44, 41, 38, 0.12), rgba(44, 41, 38, 0.5));
}

.slide-buck:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.slide-1 {
  background-image: url("../images/slide-story.jpg");
}

.slide-2 {
  background-image: url("../images/slide-recipes.jpg");
}

.slide-3 {
  background-image: url("../images/slide-book.jpg");
}

.slide-4 {
  background-image: url("../images/slide-collab.jpg");
}

.text-buck {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background: #fff !important;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 18px;
  width: max-content;
  max-width: calc(100% - 24px);
}

/* Local recipe photos (Shopify CDN is offline) */
a[href*="creamy-miso-carrot"] > div {
  background-image: url("../images/recipe-miso.jpg") !important;
}

a[href*="creamy-roasted-cauliflower"] > div {
  background-image: url("../images/recipe-cauli.jpg") !important;
}

a[href*="untortilla-migas"] > div {
  background-image: url("../images/recipe-migas.jpg") !important;
}

a[href*="kale-roasted-butternut"] > div {
  background-image: url("../images/recipe-kale.jpg") !important;
}

a[href*="spicy-shrimp-lettuce"] > div {
  background-image: url("../images/recipe-shrimp.jpg") !important;
}

.medium-up--two-thirds .medium-up--two-fifths a > div {
  height: 280px !important;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.medium-up--two-thirds .medium-up--two-fifths a:hover > div {
  transform: scale(1.02);
}

.home-banner-h1 {
  font-family: "Vesper Libre", Georgia, serif !important;
  font-size: clamp(22px, 2.4vw, 30px) !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  max-width: none !important;
}

.home-banner-h1 a {
  color: var(--ink);
}

.home-banner-h1 a:hover {
  color: var(--terracotta);
}

.home-banner-h2 {
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--peach) !important;
}

.home-banner-h3,
.home-banner-h3 p,
.home-banner-h3 span {
  color: var(--muted) !important;
  font-size: 15px;
  line-height: 1.7;
}

.medium-up--two-thirds > .grid {
  margin-bottom: 8px;
}

.medium-up--two-thirds > .grid .medium-up--three-fifths {
  padding-top: 12px;
  padding-right: 12px;
}

/* Sidebar */
.medium-up--one-third.text-center {
  background: var(--paper);
  border: 1px solid var(--line) !important;
  border-left: 1px solid var(--line) !important;
  border-radius: 24px;
  padding: 36px 22px 28px;
  box-shadow: var(--shadow);
}

.medium-up--one-third.text-center > img,
img[src*="new-circle-sidebar"] {
  width: 168px !important;
  height: 168px !important;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 12px !important;
  box-shadow: 0 10px 24px rgba(196, 120, 91, 0.25);
  border: 4px solid #fff;
}

.medium-up--one-third.text-center p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.75;
  padding: 8px 8px 18px !important;
}

.icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
}

.footer-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  margin: 6px !important;
}

.footer-link svg {
  width: 22px;
  height: 22px;
}

.footer-link:hover {
  color: var(--terracotta);
}

.footer-link path {
  fill: currentColor;
}

/* Forms */
label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

input[type="text"],
input[type="email"],
input[type="subject"],
input:not([type="submit"]):not([type="hidden"]):not([type="checkbox"]),
textarea,
select {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 6px 0 14px;
  font-family: Lato, sans-serif;
  font-size: 15px;
  color: var(--ink);
}

input:focus,
textarea:focus {
  outline: none;
  border-color: var(--peach);
  box-shadow: 0 0 0 4px rgba(236, 174, 148, 0.25);
}

form[data-drip-embedded-form] {
  margin-top: 18px;
  padding-top: 8px;
}

form[data-drip-embedded-form] h2 {
  font-family: Sacramento, cursive;
  font-size: 34px;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 12px;
}

/* Pagination */
.pagination {
  margin: 20px 0 40px;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pagination .page,
.pagination .next,
.pagination .deco {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  border-radius: 999px;
  color: var(--ink);
  font-weight: 700;
}

.pagination .page a,
.pagination .next a {
  color: inherit;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination .current {
  background: var(--ink);
  color: #fff;
}

.pagination .page:not(.current):hover {
  background: #fff;
}

/* Footer */
.site-footer {
  margin-top: 40px;
  padding: 48px 20px 28px;
  background: #2c2926;
  color: #f3ece4;
  border-radius: 28px 28px 0 0;
}

.site-footer h2,
.site-footer h2 a,
.site-footer a {
  color: #f3ece4;
}

.site-footer h2 {
  font-family: "Vesper Libre", Georgia, serif;
  font-weight: 400;
  font-size: 28px;
  width: 100%;
}

.site-footer span[style*="ecae94"] {
  color: var(--peach) !important;
}

.sub-footer,
.sub-footer a,
.site-footer .footer-link {
  color: #d8cfc4;
}

.site-footer .footer-link {
  margin: 0 14px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
}

.site-footer input[type="text"],
.site-footer input[type="email"] {
  max-width: 320px;
}

.site-footer small,
.site-footer small a {
  color: #a89f95;
}

#insta-feed:empty {
  display: none;
}

/* Contact modal */
.lupos-register-popup-bg {
  position: fixed;
  inset: 0;
  background: rgba(44, 41, 38, 0.5);
  z-index: 20000;
}

.lupos-register-popup {
  position: fixed;
  z-index: 20001;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 32px));
  max-height: 92vh;
}

.quote-form {
  background: var(--paper);
  border-radius: 24px;
  padding: 28px 32px 32px;
  box-shadow: 0 24px 80px rgba(44, 41, 38, 0.22);
  overflow: auto;
  max-height: 92vh;
}

.quote-close {
  display: block;
  text-align: right;
  font-weight: 700;
  color: var(--muted);
}

.text-mobileblock {
  width: 100% !important;
  max-width: 100%;
}

#trigger-loading-anim {
  display: none !important;
}

/* Responsive */
@media (min-width: 800px) {
  .medium-up--one-quarter {
    width: 25%;
  }

  .medium-up--one-third {
    width: 33.333%;
  }

  .medium-up--two-thirds {
    width: 66.666%;
  }

  .medium-up--two-fifths {
    width: 40%;
  }

  .medium-up--three-fifths {
    width: 60%;
  }

  .medium-up--hide {
    display: none !important;
  }

  .large-up-hide {
    display: none !important;
  }

  .index-wrap > .grid > .medium-up--one-third {
    width: 31%;
    margin-top: 8px;
  }

  .index-wrap > .grid > .medium-up--two-thirds {
    width: 69%;
    padding-right: 28px;
  }
}

@media (max-width: 799px) {
  .small--hide {
    display: none !important;
  }

  #menos-toggle-left-hand {
    display: inline-flex !important;
  }

  #menos-blanket {
    padding: 96px 14px 24px;
  }

  .slide-buck {
    width: 100%;
    padding-bottom: 62% !important;
    float: none;
  }

  .index-wrap > .grid > .medium-up--one-third,
  .index-wrap > .grid > .medium-up--two-thirds {
    float: none !important;
    width: 100%;
    margin: 0 0 28px;
  }

  .medium-up--two-thirds .medium-up--two-fifths,
  .medium-up--two-thirds .medium-up--three-fifths {
    float: none !important;
    width: 100%;
  }

  .medium-up--two-thirds .medium-up--two-fifths a > div {
    height: 220px !important;
    margin-bottom: 16px;
  }

  .home-banner-h1 {
    max-width: none !important;
  }

  .site-footer {
    border-radius: 20px 20px 0 0;
  }
}