:root{
  --bg:#FBF6EE;
  --text:#3C2F2A;
  --muted:rgba(60,47,42,.72);
  --gold:#C8A97E;
  --goldHover:#B89463;
  --border:#E4D7C8;
  --card:#FFFFFF;
  --glass:rgba(255,255,255,.22);
  --glassBorder:rgba(255,255,255,.28);
  --shadow: 0 12px 30px rgba(0,0,0,.10);
  --shadowHover: 0 18px 48px rgba(0,0,0,.16);
  --radius: 18px;
  --max: 1150px;
  --ab-speed: 8s;
}

/* Base */
*{box-sizing:border-box}
html,body{
  background: url("../img/site_bg.png") center center / cover no-repeat fixed;
  padding: 0;
  margin: 0;
height:100%;
  overflow-x:hidden;
}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--text);
  /* Let the background image on html,body show */
  background: transparent;
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{width:min(var(--max), calc(100% - 40px)); margin:0 auto}
.section{padding:28px 0}
.h1{font-size:clamp(34px, 4vw, 54px); line-height:1.05; margin:0 0 10px}
.h2{font-size:clamp(22px, 2.2vw, 28px); margin:0 0 14px}
.p{color:var(--muted); line-height:1.55; margin:0}
.small{font-size:14px; color:var(--muted)}

/* Header */
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(8px);
  background: rgba(251,246,238,.60);
  border-bottom:1px solid rgba(228,215,200,.65);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0;
}
.brand{display:flex; gap:12px; align-items:center}
.brand__logo{
  width:42px; height:42px; border-radius:14px;
  background: rgba(255,255,255,.18);
  border:1px solid rgba(228,215,200,.75);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.5px;
}
.nav{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.nav a{
  padding:10px 12px;
  border-radius: 999px;
  border:1px solid transparent;
  color:rgba(60,47,42,.85);
  font-weight:800;
}
.nav a.active{
  background: rgba(255,255,255,.18);
  border-color: rgba(228,215,200,.85);
}
.nav__right{display:flex; gap:10px; align-items:center}

.btn{
  appearance:none; border:0; cursor:pointer;
  border-radius: 999px;
  padding:12px 16px;
  font-weight:900;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  user-select:none;
}
.btn:active{transform: translateY(1px)}
.btn--gold{
  background: linear-gradient(180deg, rgba(200,169,126,1), rgba(184,148,99,1));
  color:#fff;
  box-shadow: 0 14px 30px rgba(200,169,126,.35);
}
.btn--gold:hover{background: linear-gradient(180deg, rgba(184,148,99,1), rgba(168,132,88,1)); box-shadow: 0 18px 44px rgba(200,169,126,.42)}
.btn--glass{
  background: var(--glass);
  border: 1px solid var(--glassBorder);
  color: rgba(60,47,42,.92);
  backdrop-filter: blur(8px);
}
.btn--glass:hover{box-shadow: var(--shadow); transform: translateY(-2px)}
.icon-dot{width:10px; height:10px; border-radius:999px; background:var(--gold); display:inline-block}


/* === Static Card Wrapper (no animated borders) === */
.ab{
  position:relative;
  border-radius: var(--radius);
  padding:0;
  border:1px solid rgba(228,215,200,.80);
  background: transparent;
}
.ab::before,
.ab::after{ content:none !important; display:none !important; }
.ab > .ab__in{
  position:relative;
  border-radius: var(--radius);
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
  border:1px solid rgba(255,255,255,.18);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.ab--glass > .ab__in{ background: rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); }
.ab--solid > .ab__in{ background: rgba(255,255,255,.86); border:1px solid rgba(228,215,200,.80); }
.abHover{ }
.abHover:hover{ transform:none; }


/* Grids */
.grid{display:grid; gap:16px}
.grid-3{grid-template-columns: repeat(3, minmax(0,1fr))}
.grid-4{grid-template-columns: repeat(4, minmax(0,1fr))}
@media (max-width: 980px){ .grid-4{grid-template-columns: repeat(2, minmax(0,1fr))} .grid-3{grid-template-columns: repeat(2, minmax(0,1fr))} }
@media (max-width: 560px){ .grid-4{grid-template-columns: repeat(1, minmax(0,1fr))} .grid-3{grid-template-columns: repeat(1, minmax(0,1fr))} }

/* Hero */
.hero{padding:34px 0 22px}
.hero__wrap{display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:stretch}
@media (max-width: 980px){ .hero__wrap{grid-template-columns:1fr; } }
.hero__actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}
.hero__photo{
  height: 100%;
  min-height: 310px;
}
.hero__photo img{ width:100%; height:100%; object-fit:cover; }

.cardPad{padding:18px}
.cardTitle{font-size:18px; font-weight:950; margin:0 0 6px}
.cardText{margin:0; color:var(--muted); line-height:1.45}
.cardIcon{
  width:38px; height:38px; border-radius:14px;
  background: rgba(200,169,126,.18);
  border:1px solid rgba(200,169,126,.35);
  display:grid; place-items:center;
  font-weight:900;
  margin-bottom:10px;
}

/* Product Card */
.prod__img{height:160px; border-bottom:1px solid rgba(228,215,200,.8); background: rgba(245,239,230,.75)}
.prod__img img{height:160px; width:100%; object-fit:cover}
.prod__body{padding:14px 14px 16px}
.prod__name{font-weight:950; margin:0 0 6px}
.prod__price{font-weight:900; color:rgba(60,47,42,.92); margin:0 0 12px}
.prod__btn{width:100%}
.liftGlow:hover .btn--gold{ box-shadow: 0 18px 44px rgba(200,169,126,.48); }

/* Recipe */
.recipeTitle{
  font-family: "Lucida Calligraphy", "Brush Script MT", "Segoe Script", cursive;
  font-size: clamp(26px, 2.6vw, 34px);
  margin:0 0 10px;
}
.recipeGrid{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
@media (max-width: 820px){ .recipeGrid{grid-template-columns:1fr} }
.recipeBox h3{margin:0 0 6px; font-size:16px}
.recipeBox ul{margin:0; padding-left:18px; color:var(--muted); line-height:1.55}
.recipeBox ol{margin:0; padding-left:18px; color:var(--muted); line-height:1.55}

/* Shop filters */
.pills{display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 18px}
.pill{
  padding:10px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.18);
  border:1px solid rgba(228,215,200,.8);
  font-weight:900;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.pill:hover{transform:translateY(-2px); box-shadow: var(--shadow)}
.pill.active{background: rgba(200,169,126,.18); border-color: rgba(200,169,126,.50)}
.fieldRow{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:18px}
.input, .select{
  padding:12px 14px;
  border-radius: 999px;
  border:1px solid rgba(228,215,200,.85);
  background: rgba(255,255,255,.65);
  outline:none;
  font-weight:800;
  color:rgba(60,47,42,.9);
}
.input{flex: 1 1 240px}
.select{flex: 0 0 220px}

/* Cart */
.cartWrap{display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; align-items:start}
@media (max-width: 980px){ .cartWrap{grid-template-columns:1fr} }
.cartItem{display:grid; grid-template-columns: 72px 1fr auto; gap:12px; align-items:center}
.cartThumb{width:72px; height:72px; border-radius:14px; background: rgba(245,239,230,.8); border:1px solid rgba(228,215,200,.8); overflow:hidden}
.cartThumb img{width:100%; height:100%; object-fit:cover}
.qtyRow{display:flex; gap:8px; align-items:center}
.qtyBtn{
  width:36px; height:36px; border-radius: 12px;
  border:1px solid rgba(228,215,200,.9);
  background: rgba(255,255,255,.65);
  font-weight:950;
  cursor:pointer;
}
.qtyVal{min-width:34px; text-align:center; font-weight:950}
.removeBtn{
  border:0; background:transparent; cursor:pointer;
  font-weight:950; color: rgba(182,69,74,.95);
}

/* Drawer Cart */
.cartFab{
  position:fixed; right:18px; bottom:18px; z-index:70;
  width:56px; height:56px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(200,169,126,1), rgba(184,148,99,1));
  box-shadow: 0 18px 44px rgba(200,169,126,.48);
  display:grid; place-items:center;
  color:#fff; font-weight:950;
  cursor:pointer;
}
.cartBadge{
  position:absolute; top:-8px; right:-8px;
  background: rgba(60,47,42,.95);
  color:#fff; font-size:12px; font-weight:950;
  width:22px; height:22px; border-radius:999px;
  display:grid; place-items:center;
  border:2px solid rgba(251,246,238,.9);
}
.drawerBackdrop{
  position:fixed; inset:0; z-index:80;
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(3px);
  display:none;
}
.drawer{
  position:fixed; top:0; right:-420px; height:100%; width:min(420px, 92vw);
  background: rgba(251,246,238,.92);
  border-left:1px solid rgba(228,215,200,.9);
  box-shadow: -20px 0 50px rgba(0,0,0,.18);
  transition: right .22s ease;
  z-index:81;
  display:flex; flex-direction:column;
}
.drawer.open{ right:0 }
.drawerBackdrop.open{ display:block }
.drawerHead{padding:14px 16px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(228,215,200,.85)}
.drawerBody{padding:14px 16px; overflow:auto; display:flex; flex-direction:column; gap:12px}
.drawerFoot{padding:14px 16px; border-top:1px solid rgba(228,215,200,.85)}
.drawerClose{border:0; background:transparent; font-weight:950; cursor:pointer}
.drawerTotal{display:flex; justify-content:space-between; font-weight:950; margin-bottom:12px}

/* Modal */
.modalBackdrop{
  position:fixed; inset:0; z-index:90;
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(4px);
  display:none;
  padding:18px;
}
.modalBackdrop.open{display:grid; place-items:center}
.modal{ width:min(560px, 96vw); }
.formRow{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width: 640px){ .formRow{grid-template-columns:1fr} }
.textarea{border-radius:18px; min-height:120px}
.noteOk{color: rgba(40,120,80,.95); font-weight:900}
.noteErr{color: rgba(182,69,74,.95); font-weight:900}

/* Footer (in content area) */
.footer{
  background: rgba(60,47,42,.92);
  color: rgba(251,246,238,.96);
  border-radius: var(--radius);
  padding:18px;
}
.footer a{color: rgba(251,246,238,.96); text-decoration:underline}
.footerGrid{display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:12px}
@media (max-width: 980px){ .footerGrid{grid-template-columns:1fr} }

.grid-2{grid-template-columns: repeat(2, minmax(0,1fr))}
@media (max-width: 980px){ .grid-2{grid-template-columns:1fr} }


/* === Sidebar Layout (Public) === */
.rhSidebar{
  position:fixed; left:0; top:0; height:100vh; width:200px;
  padding:18px 16px;
  background: rgba(255,255,255,.10);
  border-right: 1px solid rgba(228,215,200,.75);
  backdrop-filter: blur(8px);
  z-index:90;
}
.rhSidebar .sbBrand{
  display:flex; gap:12px; align-items:center; padding:10px 10px 16px 10px;
}
.rhSidebar .sbLogo{
  width:42px; height:42px; border-radius:14px;
  background: rgba(255,255,255,.18);
  border:1px solid rgba(228,215,200,.9);
  display:grid; place-items:center;
  font-weight:950;
}
.rhSidebar .sbName{font-weight:950; line-height:1.05;}
.rhSidebar .sbLinks{display:grid; gap:10px; padding:10px;}
.rhSidebar .sbLinks a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(228,215,200,.75);
  background: rgba(255,255,255,.14);
  font-weight:900;
  transition: transform .18s ease, box-shadow .18s ease;
}
.rhSidebar .sbLinks a:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,.10); }
.rhSidebar .sbLinks a.active{
  background: rgba(200,169,126,.35);
  border-color: rgba(200,169,126,.65);
}
.rhMain{
  margin-left: 220px;
  min-height: 100vh;
}
.rhTopMobile{
  display:none;
  position:sticky; top:0; z-index:60;
  padding:12px 14px;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.20);
  border-bottom: 1px solid rgba(228,215,200,.75);
}
.rhBurger{
  border:1px solid rgba(228,215,200,.9);
  background: rgba(255,255,255,.18);
  border-radius:14px;
  padding:10px 12px;
  font-weight:950;
  cursor:pointer;
}
.rhSidebarBackdrop{
  display:none;
  position:fixed; inset:0; z-index:89;
  background: rgba(0,0,0,.18);
}
@media (max-width: 980px){
  .rhMain{ margin-left: 0; }
  .rhTopMobile{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .rhSidebar{ transform: translateX(-105%); transition: transform .22s ease; width:min(88vw, 280px); }
  .rhSidebar.open{ transform: translateX(0); }
  .rhSidebarBackdrop.open{ display:block; }
  .cartFab{ right: 14px; bottom: 14px; }
}



/* === No motion / performance overrides === */
*, *::before, *::after{
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
.abHover:hover,
.rhSidebar .sbLinks a:hover,
.btn:hover,
.card:hover,
.productCard:hover,
.cartDrawer.open,
.rhSidebar.open{
  transform: none !important;
}

.prod__imgBtn{width:100%; padding:0; cursor:pointer; display:block}
.prod__imgBtn img{display:block}
.prod__actions{display:flex; gap:10px; flex-wrap:wrap}
.prod__miniBtn{flex:1 1 140px}
.productModalGrid{display:grid; grid-template-columns:1.05fr .95fr; gap:18px; align-items:start}
@media (max-width: 900px){ .productModalGrid{grid-template-columns:1fr} }


.shipBox{
  background:#F3E4C9;
  border:1px solid #E2C79E;
  border-radius:18px;
  padding:14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  display:grid;
  gap:10px;
}
.shipBox__title{font-weight:950; font-size:17px; color:#5B4028;}
.shipBox__sub{font-size:13px; line-height:1.45; color:rgba(91,64,40,.85);}
.shipBox__line{display:flex; justify-content:space-between; gap:12px; font-weight:800; color:#5B4028;}
.shipBox__line strong{font-weight:950;}
.shipBox__line--total{padding-top:8px; border-top:1px solid rgba(91,64,40,.15); font-size:17px;}
.shipBox__tiers{display:flex; flex-wrap:wrap; gap:8px;}
.shipPill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 10px; border-radius:999px;
  background:rgba(255,255,255,.55); border:1px solid rgba(91,64,40,.12);
  color:#6A4A2E; font-size:12px; font-weight:900;
}
.shipPill.active{background:#C8A97E; color:#fff; border-color:#C8A97E; box-shadow:0 10px 22px rgba(200,169,126,.24);}


/* === PATCH: responsive display only === */
html, body{max-width:100%; overflow-x:hidden;}
body{min-width:320px;}
.container{width:min(var(--max), calc(100% - 24px));}
@media (max-width:640px){
  .container{width:calc(100% - 20px);} 
  .section{padding:20px 0;}
  .header__inner{gap:10px; padding:10px 0;}
  .brand{min-width:0;}
  .brand__logo{width:38px; height:38px; border-radius:12px;}
  .nav{gap:8px;}
  .nav a{padding:8px 10px; font-size:14px;}
  .btn{padding:11px 14px;}
  .hero{padding:22px 0 16px;}
  .hero__photo{min-height:220px;}
  .cardPad{padding:14px;}
  .fieldRow{display:grid; grid-template-columns:1fr;}
  .input, .select{flex:unset; width:100%; min-width:0;}
  .cartItem{grid-template-columns:64px 1fr; align-items:start;}
  .cartItem > :last-child{grid-column:1 / -1; justify-self:end;}
  .qtyRow{flex-wrap:wrap;}
  .prod__img, .prod__img img{height:180px;}
}
img{height:auto;}
.ab, .ab__in, .drawer, .modalCard, .checkoutCard, .cartWrap > *, .grid > *{max-width:100%;}
.fieldRow > *, .formRow > *, .checkoutGrid > *, .modalGrid > *{min-width:0;}
.drawer{width:min(420px, 100vw);}
.modal, .modalCard, .checkoutCard{max-width:min(96vw, 560px);}
@media (max-width:820px){
  .formRow,
  .checkoutGrid,
  .modalGrid{grid-template-columns:1fr !important;}
}
@media (max-width:560px){
  .h1{font-size:clamp(28px, 9vw, 40px);} 
  .h2{font-size:clamp(20px, 6vw, 26px);} 
  .recipeGrid{grid-template-columns:1fr;}
  .drawerHead, .drawerBody, .drawerFoot{padding-left:14px; padding-right:14px;}
  .cartFab{right:14px; bottom:14px; width:54px; height:54px;}
}


/* === Full-screen adaptive patch (no horizontal side scroll) === */
html, body{width:100%; max-width:100%; overflow-x:hidden;}
*, *::before, *::after{box-sizing:border-box;}
img, svg, video, canvas, iframe{max-width:100%; height:auto;}
.container, .wrap, .page, .section, .content, .rhMain, .footer, .hero, .grid, .cards{max-width:100%; min-width:0;}
.container > *, .wrap > *, .page > *, .section > *, .content > *, .rhMain > *, .grid > *, .cards > *{min-width:0;}
input, select, textarea, button{max-width:100%;}
.table, table{max-width:100%;}
.tableWrap, .table-wrap, .table-responsive{width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.rhSidebar{max-width:min(280px, 88vw);}
.rhMain{width:auto; max-width:calc(100% - 220px);}
@media (max-width: 980px){
  .rhMain{margin-left:0 !important; width:100%; max-width:100%;}
  .container{width:min(100% - 20px, 1400px) !important;}
}


/* Book pagination + page curl */
.book-page{
  position:relative;
  transform-origin:left center;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  will-change:transform, opacity, filter;
}
.book-page.turn-next,
.book-page.turn-prev{
  pointer-events:none;
  z-index:2;
}
.book-page.turn-next{
  animation:rhBookTurnNext .82s cubic-bezier(.22,.7,.2,1) both;
}
.book-page.turn-prev{
  transform-origin:right center;
  animation:rhBookTurnPrev .82s cubic-bezier(.22,.7,.2,1) both;
}
.book-page.turn-next::after,
.book-page.turn-prev::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:120px;
  pointer-events:none;
  z-index:5;
  opacity:0;
}
.book-page.turn-next::after{
  right:-2px;
  border-top-right-radius:18px;
  border-bottom-right-radius:18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.95) 0 24px, rgba(255,255,255,0) 26px),
    linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(248,240,228,.95) 18%, rgba(214,189,154,.42) 38%, rgba(60,47,42,.12) 56%, rgba(60,47,42,0) 72%);
  box-shadow:-18px 0 28px rgba(60,47,42,.12);
  animation:rhCurlRight .82s ease both;
}
.book-page.turn-prev::before{
  left:-2px;
  border-top-left-radius:18px;
  border-bottom-left-radius:18px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.95) 0 24px, rgba(255,255,255,0) 26px),
    linear-gradient(225deg, rgba(255,255,255,.95) 0%, rgba(248,240,228,.95) 18%, rgba(214,189,154,.42) 38%, rgba(60,47,42,.12) 56%, rgba(60,47,42,0) 72%);
  box-shadow:18px 0 28px rgba(60,47,42,.12);
  animation:rhCurlLeft .82s ease both;
}
@keyframes rhBookTurnNext{
  0%{transform:perspective(1800px) rotateY(0deg) scale(1);opacity:1;filter:brightness(1);}
  35%{transform:perspective(1800px) rotateY(-14deg) scale(.992);opacity:.98;}
  70%{transform:perspective(1800px) rotateY(-34deg) scale(.986);opacity:.92;filter:brightness(.96);}
  100%{transform:perspective(1800px) rotateY(-90deg) scale(.98);opacity:0;filter:brightness(.9);}
}
@keyframes rhBookTurnPrev{
  0%{transform:perspective(1800px) rotateY(0deg) scale(1);opacity:1;filter:brightness(1);}
  35%{transform:perspective(1800px) rotateY(14deg) scale(.992);opacity:.98;}
  70%{transform:perspective(1800px) rotateY(34deg) scale(.986);opacity:.92;filter:brightness(.96);}
  100%{transform:perspective(1800px) rotateY(90deg) scale(.98);opacity:0;filter:brightness(.9);}
}
@keyframes rhCurlRight{
  0%{opacity:0;transform:translateX(0) skewY(0deg);}
  20%{opacity:.95;}
  70%{opacity:.9;transform:translateX(18px) skewY(-6deg);}
  100%{opacity:0;transform:translateX(28px) skewY(-10deg);}
}
@keyframes rhCurlLeft{
  0%{opacity:0;transform:translateX(0) skewY(0deg);}
  20%{opacity:.95;}
  70%{opacity:.9;transform:translateX(-18px) skewY(6deg);}
  100%{opacity:0;transform:translateX(-28px) skewY(10deg);}
}
.book-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}
.book-pagination__meta{
  min-width:120px;
  text-align:center;
  font-weight:900;
  color:rgba(60,47,42,.82);
}
.prod__actions{display:flex;gap:10px;flex-wrap:wrap;}
.prod__miniBtn{flex:1 1 160px;}