/* ================================================================
   CSS RESET & BASE SYSTEM
==================================================================*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin:0; padding:0; border:0; font:inherit; vertical-align:baseline; box-sizing:border-box;
}
html { line-height:1.2; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body {
  background:#fff;
  color:#5B5147;
  font-family:'Open Sans', Arial, sans-serif;
  font-size:16px;
  min-height:100vh;
  letter-spacing:0.01em;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { display:block; }
ol, ul { list-style:none; }
a { text-decoration:none; color:inherit; }
img { max-width: 100%; height: auto; display: block;}
button, input, select, textarea { font-family:inherit; font-size:inherit; color:inherit; background:none; border:none; outline:none; }
button { cursor:pointer; transition:background 0.2s, color 0.2s, box-shadow 0.2s; }

/* Import fonts */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Merriweather:700,900&display=swap');

/* ================================================================
   COLOR SYSTEM
==================================================================*/
:root {
  --primary: #5B5147;
  --secondary: #DDC9A3;
  --accent: #EAF0F2;
  --white: #fff;
  --black: #222;
  --gray: #BAC3C5;
}

/* ================================================================
   TYPOGRAPHY
==================================================================*/
h1, .h1 {
  font-family: 'Merriweather', serif;
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: -1.5px;
  color: var(--primary);
  margin-bottom: 24px;
  line-height:1.08;
  text-transform: none;
}
h2, .h2 {
  font-family: 'Merriweather', serif;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--primary);
  margin-bottom: 20px;
  line-height:1.14;
}
h3, .h3 {
  font-family: 'Merriweather', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0px;
  margin-bottom: 16px;
}
h4, .h4 {
  font-size:1.125rem;
  font-weight:600;
  margin-bottom:12px;
}
p, li, blockquote, ul, ol {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size:1rem;
  font-weight:400;
  color: var(--primary);
  line-height:1.6;
}
p {
  margin-bottom: 18px;
}
blockquote {
  font-style:italic;
  color:var(--primary);
  background:var(--accent);
  padding: 18px 24px;
  border-left:6px solid var(--secondary);
  border-radius: 0 12px 12px 0;
  margin-bottom:6px;
  font-size:1.08rem;
}
ul, ol {
  margin-bottom:18px;
  padding-left:24px;
}
ul li, ol li {
  margin-bottom:8px;
  position:relative;
}
ul li:before {
  content:"";
  display:inline-block;
  width:10px;
  height:10px;
  background:var(--secondary);
  margin-right:10px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  vertical-align: middle;
}
strong, b { font-weight:700; }

/* Geometric/structured effect for headings */
h1, h2, h3 {
  font-variant: small-caps;
  text-shadow:0 2px 0 #eaf0f2;
  letter-spacing:0.02em;
}

/* ==============================================================
   LAYOUT CONTAINERS & STRUCTURED FLEX GRIDS
================================================================*/
.container {
  width:100%;
  max-width:1160px;
  margin: 0 auto;
  padding:0 24px;
}
.content-wrapper {
  width:100%;
  display:flex;
  flex-direction:column;
  align-items: flex-start;
  gap: 20px;
}
.section {
  margin-bottom: 60px;
  padding: 40px 20px;
}
.card-container {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}
.card {
  margin-bottom:20px;
  position:relative;
  background:var(--accent);
  border-radius:16px;
  box-shadow:0 2px 10px rgba(91,81,71,0.11);
  flex:1 1 320px;
  min-width:260px;
  transition:box-shadow .2s,transform .2s;
}
.card:hover {
  box-shadow:0 6px 32px rgba(91,81,71,0.13);
  transform:translateY(-6px) scale(1.015);
}
.content-grid {
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  justify-content:space-between;
}
.text-image-section {
  display:flex;
  align-items:center;
  gap:30px;
  flex-wrap:wrap;
}
.testimonial-card {
  display:flex;
  align-items:center;
  gap:20px;
  padding:20px;
  margin-bottom:20px;
  background:var(--accent);
  border-radius: 15px;
  box-shadow:0 4px 24px 0 rgba(109,98,72,0.08);
  flex:1 1 350px;
  flex-direction:row;
  border-left:6px solid var(--secondary);
  transition:box-shadow .2s,transform .2s;
}
.testimonial-card span {
  font-size:0.96rem;
  color:var(--primary);
  margin-left:8px;
  white-space: nowrap;
  font-weight:600;
  font-style: normal;
}
.testimonial-card:hover, .testimonial-card:focus-within {
  box-shadow:0 8px 36px 0 rgba(91,81,71,0.18);
  transform:scale(1.01) skewX(-2deg);
}
.feature-item {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:15px;
}
.quick-links {
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-top:18px;
}
.cta-box {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 22px;
  background:var(--accent);
  border-radius:18px;
  padding:28px 24px;
  margin:24px 0 0 0;
  box-shadow:0 2px 18px rgba(221,201,163,0.06);
  flex-wrap:wrap;
}
.cta-box p { margin-bottom:0; color:var(--primary); }
.phone-link {
  font-size:1.15rem;
  font-weight:700;
  color:var(--primary);
  border-bottom:2px solid var(--secondary);
  margin:0 8px;
  transition:color .18s,border-color .18s;
}
.phone-link:hover, .phone-link:focus { color:var(--secondary); border-color:var(--primary);}

/* ---------------------------------------------------------------
   Header / Navigation
----------------------------------------------------------------*/
header {
  background:var(--white);
  width:100%;
  box-shadow:0 2px 10px rgba(91,81,71,0.04);
  padding:0;
  position:relative;
  border-bottom:4px solid var(--secondary);
  z-index:1002;
}
header .container {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:18px;
  padding-bottom:18px;
}
header nav {
  display:flex;
  flex-direction:row;
  gap:20px;
  align-items:center;
}
header nav a {
  font-family:'Open Sans', Arial, sans-serif;
  font-size:1rem;
  font-weight:600;
  color:var(--primary);
  padding:8px 14px;
  border-radius:7px;
  transition:background .16s,color .14s;
  letter-spacing:0.01em;
  position:relative;
}
header nav a:hover, header nav a:focus {
  background:var(--secondary);
  color:var(--white);
}
.btn-primary {
  background:var(--primary);
  color:var(--white);
  font-family:'Merriweather', serif;
  font-weight:900;
  font-size:1.13rem;
  border-radius:7px;
  padding:11px 28px;
  margin-left:20px;
  box-shadow:0 2px 10px rgba(91,81,71,0.07);
  border:none;
  transition:background .18s, transform .15s;
  text-transform:uppercase;
  letter-spacing:0.05em;
  outline:none;
  display:inline-block; text-align:center;
}
.btn-primary:hover, .btn-primary:focus {
  background:var(--secondary);
  color:var(--primary);
  transform:scale(1.04);
}
.btn-secondary {
  background:var(--secondary);
  color:var(--primary);
  font-family:'Open Sans', Arial, sans-serif;
  font-weight:700;
  font-size:1rem;
  border-radius:7px;
  padding:10px 24px;
  box-shadow:0 2px 8px rgba(221,201,163,0.07);
  margin-right:0;
  transition:background .19s, color .16s,transform .11s;
}
.btn-secondary:hover, .btn-secondary:focus {
  background:var(--primary);
  color:var(--white);
  transform:scale(1.03);
}

/* Hamburger / Mobile menu button */
.mobile-menu-toggle {
  display:none;
  background:none;
  border:none;
  font-size:2.1rem;
  color:var(--primary);
  margin-left:auto;
  margin-right:16px;
  z-index:1003;
  border-radius:8px;
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  transition:background .14s,color .13s,box-shadow .15s;
}
.mobile-menu-toggle:active,
.mobile-menu-toggle:focus {
  background:var(--secondary);
  color:var(--white);
}
.mobile-menu {
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  width:100vw; height:100vh;
  background:var(--white);
  box-shadow:0 12px 60px 0 rgba(91,81,71,0.13);
  z-index:2000;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:36px 24px 28px 24px;
  transform:translateX(-100vw);
  transition:transform 0.44s cubic-bezier(.6,.4,.15,1.0);
  gap:24px;
  will-change:transform;
}
.mobile-menu.active {
  transform:translateX(0);
}
.mobile-menu-close {
  align-self:flex-end;
  background:var(--secondary);
  border:none;
  color:var(--primary);
  font-size:2rem;
  border-radius:8px;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
  margin-right:4px;
  transition:background .14s;
}
.mobile-menu-close:hover, .mobile-menu-close:focus {
  background:var(--primary);
  color:var(--white);
}
.mobile-nav {
  display:flex;
  flex-direction:column;
  gap:18px;
  width:100%;
}
.mobile-nav a {
  font-family:'Merriweather', serif;
  font-size:1.24rem;
  padding:18px 0;
  font-weight:700;
  color:var(--primary);
  border-bottom:1px solid var(--accent);
  border-radius:0;
  text-align:left;
  transition:background .13s,color .13s;
}
.mobile-nav a:hover, .mobile-nav a:focus {
  background:var(--secondary);
  color:var(--white);
}

/* ---------------------------------------------------------------
   Main content sections & pages
----------------------------------------------------------------*/
.category-list, .feature-grid {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  justify-content:flex-start;
}
.category-list > div, .feature-grid > div {
  flex:1 1 246px;
  min-width:220px;
  background:var(--accent);
  border-radius:12px;
  box-shadow:0 1px 8px rgba(91,81,71,0.04);
  padding:30px 22px 22px 22px;
  margin-bottom:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:13px;
  position:relative;
  transition:box-shadow 0.2s, transform 0.15s;
}
.category-list > div:hover, .feature-grid > div:hover {
  box-shadow:0 8px 30px rgba(221,201,163,0.11);
  transform:scale(1.03) skewY(-1.1deg);
}
.category-list > div h2, .feature-grid h3 {
  font-family:'Merriweather', serif;
  font-size:1.24rem;
  color:var(--primary);
  margin-bottom:8px;
}

.popular-products {
  margin-top:32px;
  padding:22px 16px 14px 16px;
  background:var(--accent);
  border-radius:9px;
  box-shadow:0 2px 10px rgba(91,81,71,0.06);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:13px;
}
.popular-products h3 { font-size:1.12rem;margin-bottom:8px; }
.popular-products ul { margin-bottom:10px; }

.star-rating-summary {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  font-size:1.01rem;
  color:var(--primary);
  font-weight:600;
}
.star-rating-summary img {
  width: 25px; height: 25px; display:inline-block;
}

.text-section {
  display:flex;
  flex-direction:column;
  gap:16px;
}
.text-section h2 { margin-top:12px; margin-bottom:8px; }
.text-section ul, .text-section ol { margin-bottom:0; }
.map-placeholder {
  margin-top:18px;
  padding:18px 18px 8px 18px;
  background:var(--accent);
  border-radius:8px;
  box-shadow:0 1px 8px rgba(91,81,71,0.04);
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:18px;
}

.contact-details {
  display:flex;
  flex-direction:column;
  gap:14px;
  margin:26px 0;
}
.contact-details div a {
  color:var(--primary);
  border-bottom:1.5px solid var(--secondary);
  transition:color .16s,border-color .16s;
}
.contact-details div a:hover {
  color:var(--secondary);
  border-color:var(--primary);
}

/* ---------------------------------------------------------------
   FOOTER
----------------------------------------------------------------*/
footer {
  background: var(--primary);
  color:var(--white);
  padding:0;
  border-top: 4px solid var(--secondary);
  margin-top:90px;
}
footer .container {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:26px;
  padding-top:36px;
  padding-bottom:16px;
}
.footer-nav {
  display:flex;
  flex-direction:row;
  gap:44px;
  width:100%;
  margin-bottom:16px;
}
.footer-nav nav {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.footer-nav a {
  color:var(--white);
  font-family:'Open Sans',Arial,sans-serif;
  font-size:1rem;
  padding:0 0 2px 0;
  border-bottom:1.5px solid transparent;
  border-radius:0;
  transition:border-color .11s, color .11s, background .12s;
}
.footer-nav a:hover, .footer-nav a:focus {
  color:var(--secondary);
  border-bottom:1.5px solid var(--secondary);
  background:none;
}
.footer-contact {
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  align-items:center;
  font-size:0.99rem;
}
.footer-contact span {
  display:flex;
  align-items:center;
  gap:5px;
}
.footer-contact img {
  width:19px;
  height:19px;
  vertical-align:middle;
  margin-right:5px;
}
.footer-social {
  display:flex;
  gap:16px;
  margin-top:8px;
}
.footer-social a img {
  width:32px; height:32px; filter:brightness(1.12);
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 1px 8px rgba(221,201,163,0.08);
  transition:filter .18s, background .15s;
}
.footer-social a:hover img { background:var(--secondary);filter:brightness(1.3);}

.copyright {
  font-size:0.92rem;
  color:var(--secondary);
  margin-top:18px;
  width:100%;
  text-align:left;
  opacity:0.95;
}
/* FOOTER BUTTON (ordering now) */
footer .btn-primary {
  margin:24px 0 0 0;
  font-size:0.96rem;
  padding:10px 22px;
  background:var(--secondary);
  color:var(--primary);
  border-radius:24px;
  font-family:'Open Sans', Arial, sans-serif;
  font-weight:700;
  box-shadow:none;
  text-transform:none;
  transition:background 0.15s, color 0.14s,transform .10s;
}
footer .btn-primary:hover, footer .btn-primary:focus {
  background:var(--primary);
  color:var(--secondary);
}

/* ---------------------------------------------------------------
   MANDATORY FLEXBOX ALIGNMENT / COMMON CLASSES
----------------------------------------------------------------*/
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; }
.content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Adequate spacing between cards and flex children */
.card, .feature-grid > div, .testimonial-card, .category-list > div {
  margin-right: 0;
  margin-bottom:20px;
}

/* ---------------------------------------------------------------
   COOKIE CONSENT BANNER & MODAL
----------------------------------------------------------------*/
.cookie-banner {
  position:fixed;
  bottom:0; left:0; width:100vw;
  z-index:8010;
  background:var(--primary);
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 32px 20px 24px;
  font-size:1.075rem;
  box-shadow:0 -2px 24px 0 rgba(91,81,71,0.08);
  transition:transform .35s cubic-bezier(.5,.9,.27,1.08);
  will-change:transform;
  border-radius:14px 14px 0 0;
}
.cookie-banner.hide {
  transform:translateY(120%);
  pointer-events:none;
  opacity:0.2;
}
.cookie-banner-content {
  display: flex;
  align-items: center;
  gap: 20px;
  flex:1 1 70%;
}
.cookie-banner-buttons {
  display: flex;
  gap: 14px;
  flex-wrap:wrap;
  align-items: center;
}
.cookie-btn {
  background: var(--secondary);
  color: var(--primary);
  border-radius: 7px;
  font-size:1rem;
  padding: 9px 19px;
  font-weight: 700;
  border:none;
  box-shadow:0 0.5px 5px rgba(221,201,163,0.04);
  transition: background .14s,color .13s;
  margin:0;
}
.cookie-btn:hover, .cookie-btn:focus { background: var(--accent); color: var(--primary);}
.cookie-btn.settings { background: var(--accent); color: var(--primary); font-weight: 600;}
.cookie-btn.reject { background: #b98c6f; color:var(--white); }
.cookie-btn.reject:hover { background: var(--primary); color:var(--secondary); }

.cookie-modal-backdrop {
  position:fixed;top:0;left:0;right:0;bottom:0;
  width:100vw;height:100vh;
  background:rgba(91,81,71,0.38);
  z-index:8020;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .23s;
  opacity:1;
}
.cookie-modal {
  background:var(--accent);
  border-radius:14px;
  box-shadow:0 8px 42px 0 rgba(91,81,71,0.13);
  color:var(--primary);
  width:95vw; max-width:420px;
  padding:30px 22px 20px 22px;
  position:relative;
  z-index:8023;
  display:flex;flex-direction:column;gap:18px;
}
.cookie-modal h3 {
  font-family:'Merriweather',serif;
  font-size:1.19rem;
  font-weight:900;
  color:var(--primary);
}
.cookie-categories {
  display:flex;
  flex-direction:column;
  gap:16px;
}
.cookie-category {
  display:flex;align-items:center;gap:16px;
  background:var(--secondary);
  color:var(--primary);
  padding:12px 11px;
  border-radius:7px;
}
.cookie-category input[type=checkbox] {
  width:19px; height:19px;
  border-radius:3px;
  accent-color:var(--primary);
  margin-right:6px; margin-left:6px;
}
.cookie-category .always-on {
  color: #48B646;
  font-weight: 700;
  font-size:0.98rem;
}
.cookie-modal .cookie-btn { margin-top:14px; }
.cookie-modal-close {
  position:absolute;
  top:10px; right:14px;
  background:none;
  border:none;
  font-size:1.32rem;
  color:var(--primary);
  z-index:9000;
  cursor:pointer;
  border-radius:7px;
  width:32px;height:32px;
}
.cookie-modal-close:hover { background:var(--secondary); color:var(--white);}

/* ================================================================
   RESPONSIVE DESIGN (Mobile-first, then breakpoints)
==================================================================*/
@media(max-width:992px){
  .container { max-width:98vw; padding-left:12px; padding-right:12px; }
  .category-list > div, .feature-grid > div, .card { min-width:180px; }
}
@media(max-width:768px){
  h1, .h1 { font-size:2rem; }
  h2, .h2 { font-size:1.37rem; }
  .header nav { gap:10px; }

  .content-wrapper {
    padding:0;
    gap:16px;
  }
  .category-list, .feature-grid,
  .content-grid, .card-container {
    gap:18px;
  }
  .category-list, .feature-grid { flex-wrap:wrap; }
  .category-list > div, .feature-grid > div {
    min-width:130px;
    padding:18px 10px 10px 10px;
    font-size:0.99rem;
  }
  .testimonials,
  .card,
  .cta-box {
    flex-direction: column;
    align-items: flex-start;
  }
  .cta-box { gap:13px; padding:18px 10px; }
  .footer-nav { flex-direction:column; gap:12px; }
  .footer-contact, .footer-social{ gap:10px; }
  .copyright { font-size:0.87rem; }
  .section { margin-bottom:36px; padding:26px 8px; }
  .testimonial-card {
    flex-direction:column;
    align-items:flex-start;
    padding:14px;
    gap:10px;
  }
  .text-image-section { flex-direction:column; gap:16px; }
  .content-grid { flex-direction:column; gap:15px; }
  .feature-item { gap:8px; }
  .popular-products { padding: 14px 6px; }
  .map-placeholder { flex-direction:column; gap:10px; padding:10px 5px 5px 5px; }
  .cookie-banner { flex-direction:column; align-items:flex-start; padding:14px 8px; font-size:0.97rem; gap:12px; }
  .cookie-banner-content { gap:13px; }
  .cookie-banner-buttons { gap:7px; }
}
@media (max-width:560px) {
  h1, .h1 { font-size:1.37rem; }
  .btn-primary,.btn-secondary { padding:8px 12px; font-size:1rem;}
  .footer-contact { font-size:0.84rem; }
  .footer-social a img { width:27px;height:27px; }
}

/* ---------------------------------------------------------------
   SHOW/HIDE NAV
----------------------------------------------------------------*/
@media (max-width:980px) {
  header .container { padding-left:8px; padding-right:8px; }
  header nav, header .btn-primary {
    display:none;
  }
  .mobile-menu-toggle { display:flex; }
}
@media (min-width:981px) {
  .mobile-menu, .mobile-menu-toggle { display:none!important; }
}

/* ================================================================
   GEOMETRIC STRUCTURED VISUALS & INTERACTIONS
==================================================================*/
.card, .feature-grid > div, .testimonial-card {
  border-radius: 16px 4px 16px 4px;
  /* geometric cut */
  border-right: 4px solid var(--secondary);
  border-bottom: 4px solid var(--accent);
  /* subtle "/" geometric effect */
  box-shadow: 0 4px 24px 0 rgba(221,201,163,0.07);
}
.category-list > div {
  border-radius: 18px 7px 18px 7px;
  border-right: 4px solid var(--secondary);
  border-bottom: 4px solid var(--accent);
}
.section {
  background: var(--accent);
  border-radius:24px 10px 24px 10px;
  box-shadow:0 2px 18px rgba(221,201,163,0.05);
}

hr { border:0; height:2px; background:var(--secondary); margin:28px 0; }

::-webkit-scrollbar { width:10px; background-color:var(--accent); border-radius:8px; }
::-webkit-scrollbar-thumb { background-color:var(--secondary); border-radius:8px; }

/* Animations */
.card, .testimonial-card, .category-list > div, .feature-grid > div, .btn-primary, .btn-secondary, .mobile-menu, .cookie-banner, .cookie-modal, .cta-box {
  transition: box-shadow .22s, background .19s, border-color .15s, color .15s, transform .19s;
}

/* Accessible focus states */
a:focus, .btn-primary:focus, .btn-secondary:focus, button:focus, .mobile-menu-close:focus, .cookie-btn:focus {
  outline:2.5px solid var(--secondary);
  outline-offset:1.5px;
  z-index:3;
}

/* ===================== END ===================== */