/* ═══════════════════════════════════════════
   RESET & ROOT
═══════════════════════════════════════════ */
 @font-face {
    font-family: 'Flame';
    src: url('fonts/FlameSans-Regular.woff') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* Circular Std - Medium (500) */
@font-face {
    font-family: 'Flame';
    src: url('fonts/Flame-Regular.woff') format('truetype');
    font-weight: 500;
    font-style: normal;
}

/* Sodo Sans - Bold (700) */
@font-face {
    font-family: 'Flame';
    src: url('fonts/Flame-Bold.woff') format('truetype');
    font-weight: 600;
    font-style: normal;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  /* ── Brand palette: lime-green / black / light-grey / white ── */
  --cream:#ffffff;
  --off-white:#ffffff;
  --warm-white:#e0e0e0;
  --choco-50:#f5f5f5;
  --choco-100:#e0e0e0;
  --choco-200:#b0cf6a;
  --choco-300:#78b72a;
  --choco-400:#5a8f1f;
  --choco-500:#4a7519;
  --choco-600:#3a5c12;
  --choco-700:#2a430d;
  --choco-800:#1a2a07;
  --accent:#78b72a;
  --accent-light:#9ace4e;
  --accent-dark:#5a8f1f;
  --text-dark:#000000;
  --text-mid:#1a1a1a;
  --text-light:#3a3a3a;
  --text-muted:#777777;
  --border:#d4d4d4;
  --shadow:0 4px 30px rgba(0,0,0,0.07);
  --shadow-lg:0 20px 60px rgba(0,0,0,0.13);
  --radius:4px;
  --radius-sm:4px;
  --ease:cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-bounce:cubic-bezier(0.34,1.56,0.64,1);
  --font:'Flame',sans-serif;
  --bottom-bar-h:72px;
}
html{scroll-behavior:smooth;}
body{
  margin:0;padding:0;
  font-family:var(--font);
  background:var(--cream);
  color:var(--text-dark);
  line-height:1.6;
  overflow:hidden;
  width:100%;
  height:100%;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
html{height:100%;}
/* Main scroll container - prevents body scroll lock issue */
pkc-page{
  display:block;
  width:100%;
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
pkc-page.modal-open{overflow:hidden;}
/* Custom element base display */
pkc-header,pkc-footer,pkc-section,pkc-aside,pkc-main{display:block;}
pkc-nav{display:flex;}
a{text-decoration:none;color:inherit;}
button{cursor:pointer;border:none;background:none;font-family:var(--font);}
ul{list-style:none;}
img{max-width:100%;display:block;object-fit:cover;}
input,select,textarea{font-family:var(--font);}

/* ═══════════════════════════════════════════
   SCROLLBAR
═══════════════════════════════════════════ */
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--choco-200);border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:var(--accent-light);}

/* ═══════════════════════════════════════════
   UTILITY
═══════════════════════════════════════════ */
.container{max-width:1400px;margin:0 auto;padding:0 40px;}
.btn-primary{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 32px;background:var(--accent);color:#fff;
  border-radius:50px;font-size:14px;font-weight:500;letter-spacing:0.3px;
  transition:all 0.3s var(--ease);border:none;
}
.btn-primary:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(120,183,42,0.35);}
.btn-secondary{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 30px;border:2px solid rgba(255,255,255,0.75);color:#fff;
  border-radius:50px;font-size:14px;font-weight:500;
  transition:all 0.3s var(--ease);
  background:rgba(255,255,255,0.08);backdrop-filter:blur(6px);
}
.btn-secondary:hover{background:rgba(255,255,255,0.18);border-color:#fff;transform:translateY(-2px);}
.section-label{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:500;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--accent-light);margin-bottom:14px;
}
.section-label::before{content:'';width:20px;height:2px;background:var(--accent-light);border-radius:2px;}
.section-title{font-size:clamp(30px,3.5vw,50px);font-weight:500;line-height:1.08;color:var(--text-dark);letter-spacing:-1px;}
.section-sub{font-size:15px;color:var(--text-light);margin-top:12px;line-height:1.75;max-width:460px;}

/* ═══════════════════════════════════════════
   REVEAL ANIMATIONS
═══════════════════════════════════════════ */
.reveal{opacity:0;transform:translateY(36px);transition:opacity 0.7s var(--ease),transform 0.7s var(--ease);}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal-left{opacity:0;transform:translateX(-36px);transition:opacity 0.7s var(--ease),transform 0.7s var(--ease);}
.reveal-left.visible{opacity:1;transform:translateX(0);}
.reveal-right{opacity:0;transform:translateX(36px);transition:opacity 0.7s var(--ease),transform 0.7s var(--ease);}
.reveal-right.visible{opacity:1;transform:translateX(0);}
.reveal-scale{opacity:0;transform:scale(0.93);transition:opacity 0.7s var(--ease),transform 0.7s var(--ease);}
.reveal-scale.visible{opacity:1;transform:scale(1);}
[data-delay="1"]{transition-delay:0.08s;}
[data-delay="2"]{transition-delay:0.16s;}
[data-delay="3"]{transition-delay:0.24s;}
[data-delay="4"]{transition-delay:0.32s;}
[data-delay="5"]{transition-delay:0.40s;}
[data-delay="6"]{transition-delay:0.48s;}

/* ═══════════════════════════════════════════
   HEADER  [pkc- prefix throughout] — FLOATING BAR
═══════════════════════════════════════════ */
.pkc-header{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);
  width:calc(100% - 48px);max-width:1360px;z-index:900;
  padding:12px 24px;
  display:flex;justify-content:space-between;align-items:center;
  background:rgb(255, 255, 255);
 
  border:1px solid rgba(212,212,212,0.6);
  border-radius:60px;
  box-shadow:0 4px 24px rgba(0,0,0,0.08), 0 1px 0 rgba(255,255,255,0.9) inset;
  transition:transform 0.4s var(--ease), padding 0.3s var(--ease), box-shadow 0.3s, top 0.3s var(--ease), width 0.3s var(--ease), background 0.3s;
  box-sizing:border-box;
}
.pkc-header.scrolled{
  padding:10px 20px;
  background:rgba(255,255,255,0.98);
  box-shadow:0 8px 32px rgba(0,0,0,0.12), 0 1px 0 rgba(255,255,255,1) inset;
}
.pkc-header.hidden{
  transform:translateX(-50%) translateY(calc(-100% - 32px));
}

/* HEADER SEARCH */
.pkc-search-wrap{
  position:relative;flex:1;max-width:340px;margin:0 20px;order:2;
}
.pkc-search-input{
  width:100%;padding:9px 16px 9px 38px;
  border:1.5px solid var(--border);border-radius:50px;
  background:#f7f7f7;font-family:var(--font);font-size:13px;
  color:var(--text-dark);outline:none;
  transition:border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.pkc-search-input::placeholder{color:var(--text-muted);}
.pkc-search-input:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(120,183,42,0.12);}
.pkc-search-icon{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--text-muted);pointer-events:none;
}
.pkc-search-results{
  position:absolute;top:calc(100% + 10px);left:0;right:0;
  background:#fff;border:1.5px solid var(--border);border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,0.12);
  z-index:999;
  overflow:hidden;
  display:none;
}
.pkc-search-results-inner{
  max-height:360px;
  overflow-y:auto;
  border-radius:16px;
  scrollbar-width:thin;
  scrollbar-color:var(--choco-100) transparent;
}
.pkc-search-results-inner::-webkit-scrollbar{width:4px;}
.pkc-search-results-inner::-webkit-scrollbar-track{background:transparent;margin:8px 0;}
.pkc-search-results-inner::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px;}
.pkc-search-results.visible{display:block;}
.pkc-search-result-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;cursor:pointer;
  transition:background 0.15s;
  border-bottom:1px solid var(--off-white);
}
.pkc-search-result-item:last-child{border-bottom:none;}
.pkc-search-result-item:hover{background:var(--choco-50);}
.pkc-search-result-img{
  width:44px;height:44px;border-radius:10px;object-fit:cover;flex-shrink:0;
  background:var(--choco-50);
}
.pkc-search-result-info{flex:1;min-width:0;}
.pkc-search-result-name{font-size:13px;font-weight:500;color:var(--text-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pkc-search-result-cat{font-size:11px;color:var(--text-muted);}
.pkc-search-result-price{font-size:13px;font-weight:500;color:var(--accent);flex-shrink:0;}
.pkc-search-no-results{padding:20px;text-align:center;color:var(--text-muted);font-size:13px;}
@media(max-width:900px){
  .pkc-search-wrap{display:none;}
}
.pkc-header-left{display:flex;align-items:center;gap:40px;min-width:0;flex:1;order:1;}
.pkc-logo-wrap{display:flex;align-items:center;gap:11px;flex-shrink:0;}
.pkc-logo-icon{
  width:auto;height:38px;border-radius:10px;
  background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.pkc-logo-text{font-size:19px;font-weight:500;letter-spacing:-0.4px;color:var(--text-dark);}
.pkc-logo-text span{color:var(--accent);}
.pkc-nav-links{display:flex;align-items:center;gap:28px;}
.pkc-nav-links a{font-size:16px;font-weight:500;color:var(--text-mid);transition:color 0.2s;letter-spacing:0.2px;white-space:nowrap;}
.pkc-nav-links a:hover{color:var(--accent);}
.pkc-header-right{display:flex;align-items:center;gap:12px;flex-shrink:0;order:3;}
.pkc-icon-btn{
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--text-mid);transition:all 0.2s;position:relative;flex-shrink:0;
}
.pkc-icon-btn:hover{background:var(--choco-50);color:var(--accent);}
.pkc-icon-btn.fav-active svg{fill:var(--accent);stroke:var(--accent);}
.pkc-menu-toggle{display:none;}
.pkc-header-badge{
  position:absolute;top:-4px;right:-4px;
  background:var(--accent);color:#fff;
  font-size:9px;font-weight:500;
  width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  line-height:1;
}

/* ═══════════════════════════════════════════
   HERO — full-bleed background image
═══════════════════════════════════════════ */
.hero{
  min-height:92vh;position:relative;
  display:flex;align-items:center;
  overflow:hidden;
  padding-top:90px;
}
.hero-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to right, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.15) 100%);
}
.hero-content{
  position:relative;z-index:2;
  padding:130px 0 120px;
  width:100%;
  display:flex;
  align-items:center;
}
.hero-text-col{
  max-width:560px;
}
.hero-img-col{
  display:none;
}
.hero h1{
  font-size:clamp(74px,5.5vw,64px);
  font-weight:500;line-height:1.0;
  color:#ffffff;
  margin-bottom:22px;
}
.hero h1 em{
  color:var(--accent);font-style:normal;
  position:relative;display:inline-block;
}
.hero-sub{
  font-size:17px;color:rgba(255,255,255,0.85);
  line-height:1.75;margin-bottom:34px;max-width:440px;font-weight:400;
}
.hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.hero-scroll{
  position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  color:rgba(255,255,255,0.55);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:600;
}

/* ═══════════════════════════════════════════
   MENU SECTION — HORIZONTAL ROW LAYOUT (no sidebar)
═══════════════════════════════════════════ */
.menu-section{padding:96px 0;background:var(--off-white);}
.menu-header-top{margin-bottom:52px;}
.menu-layout{display:block;}
/* CATEGORY ROW */
.category-group{margin-bottom:56px;}
.category-group:last-child{margin-bottom:0;}
.category-group-header{
  display:flex;align-items:center;
  margin-bottom:20px;
}
.cat-group-title-wrap{display:flex;align-items:center;gap:12px;}
.cat-group-icon{
  width:38px;height:38px;border-radius:10px;
  background:var(--choco-50);border:1px solid var(--choco-100);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.cat-group-title{font-size:22px;font-weight:500;color:var(--text-dark);}
/* HORIZONTAL SCROLL ROW - shows 4 cards */
.products-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
/* Hidden extra cards */
.products-extra{
  display:none;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:18px;
}
.products-extra.expanded{display:grid;}
/* SEE ALL BUTTON — sits below cards, centred */
.see-all-wrap{
  display:flex;justify-content:center;
  margin-top:22px;
}
.see-all-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 28px;border-radius:50px;
  font-size:15px;font-weight:500;color:var(--accent);
  border:2px solid var(--accent);
  background:transparent;
  transition:all 0.2s var(--ease);cursor:pointer;
}
.see-all-btn:hover{background:var(--accent);color:#fff;}
.see-all-btn.open .see-all-arrow{transform:rotate(180deg);}
.see-all-arrow{transition:transform 0.3s var(--ease);display:flex;align-items:center;}
.product-card{
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform 0.3s var(--ease),box-shadow 0.3s;
  cursor:pointer;
  position:relative;
}

.product-img-wrap{
  position:relative;aspect-ratio:1/1;overflow:hidden;
  background:var(--choco-50);
}
.product-img-wrap img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 0.55s var(--ease);
}
.product-card:hover .product-img-wrap img{transform:scale(1.09);}
.product-badge{
  position:absolute;top:10px;left:10px;z-index:2;
  font-size:10px;font-weight:500;letter-spacing:0.8px;text-transform:uppercase;
  padding:4px 9px;border-radius:50px;
}
.product-badge.popular{background:var(--accent);color:#fff;}
.product-badge.new{background:#22A35A;color:#fff;}
.fav-btn{
  position:absolute;top:10px;right:10px;z-index:3;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,0.92);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;
}
.fav-btn:hover{background:#fff;transform:scale(1.1);}
.fav-btn.active svg{fill:var(--accent);stroke:var(--accent);}
.quick-add{
  position:absolute;bottom:10px;left:10px;right:10px;z-index:2;
  background:rgba(255,255,255,0.96);backdrop-filter:blur(8px);
  border-radius:50px;padding:10px 16px;
  display:flex;justify-content:center;align-items:center;gap:6px;
  font-size:14px;font-weight:500;color:var(--accent);
  transform:translateY(60px);opacity:0;
  transition:all 0.3s var(--ease);
 
}
.product-card:hover .quick-add{transform:translateY(0);opacity:1;}
.quick-add:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.product-info{padding:14px 0;}
.product-name{font-size:19px;font-weight:500;color:var(--text-dark);margin-bottom:3px;line-height:1.3;}
.product-desc{font-size:15px;color:#00000094;margin-bottom:10px;line-height:1.5;}
.product-footer{display:flex;justify-content:space-between;align-items:center;}
.product-price{font-size:19px;font-weight:500;color:var(--accent);}
.product-price span{font-size:11px;font-weight:400;color:var(--text-muted);}
.product-rating{display:flex;align-items:center;gap:3px;font-size:11px;color:var(--text-muted);}
.stars-svg{color:#F59E0B;}

/* Mobile sticky filter tabs */
.pkc-mobile-filter-bar{
  display:none;
  position:sticky;top:0;z-index:499;
  background:var(--off-white);
  border-bottom:1px solid var(--border);
  padding:10px 16px;
  overflow-x:auto;
  gap:8px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  margin-top:0;
}
.pkc-mobile-filter-bar::-webkit-scrollbar{display:none;}
.pkc-mobile-filter-tab{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:50px;
  font-size:12px;font-weight:500;color:var(--text-light);
  border:1.5px solid var(--border);background:#fff;
  white-space:nowrap;flex-shrink:0;transition:all 0.2s;cursor:pointer;
}
.pkc-mobile-filter-tab.active{background:var(--accent);border-color:var(--accent);color:#fff;}

/* ═══════════════════════════════════════════
   ORDER SHEET — SLIDES UP FROM BOTTOM
═══════════════════════════════════════════ */
.overlay{
  position:fixed;inset:0;
  background:rgba(7,26,16,0.5);
  z-index:2000;opacity:0;visibility:hidden;
  transition:opacity 0.4s var(--ease), visibility 0.4s;
  /* No blur on overlay - header stays clear */
}
.overlay.open{opacity:1;visibility:visible;}

/* The sheet itself */
.order-sheet{
  position:fixed;
  /* Anchor to bottom, leave 64px gap at top so it never touches screen edge */
  bottom:0;left:50%;
  transform:translateX(-50%) translateY(100%);
  width:100%;max-width:1350px;
  height:calc(100vh - 20px);    /* fixed height — always leaves visible gap at top */
  background:#fff;
  border-radius:40px 40px 0 0;
  box-shadow:0 -20px 80px rgba(0,0,0,0.18);
  z-index:2001;
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:transform 0.48s cubic-bezier(0.32,0.72,0,1); 
}
.overlay.open .order-sheet{
  transform:translateX(-50%) translateY(0);
}

/* Drag handle */
.order-sheet-handle{
  width:40px;height:4px;border-radius:2px;
  background:var(--border);
  margin:14px auto 14px;
  flex-shrink:0;
}

/* Sheet inner layout — image wider, details narrower */
.order-sheet-layout{
  display:grid;
  grid-template-columns:55% 1fr;
  flex:1;
  min-height:0;
  overflow:hidden;
}

/* Left: sticky image column — top-left radius matches the sheet's 40px */
.order-sheet-img-col{
  position:relative;overflow:hidden;
  background:var(--choco-50);
  flex-shrink:0; padding-top: 20px;
  border-radius:40px 0 0 0;
}
.order-sheet-img-col img{
  width:100%;height:100%;object-fit:cover;
  position:absolute;inset:0;
}
.order-sheet-img-col::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,0.18),transparent 50%,rgba(0,0,0,0.25));
}

/* Badge on image */
.order-sheet-badge{
  position:absolute;bottom:20px;left:20px;z-index:3;
  background:var(--accent);color:#fff;
  font-size:11px;font-weight:500;letter-spacing:0.6px;text-transform:uppercase;
  padding:6px 14px;border-radius:50px;
}

/* Right column: flex column so scroll + sticky footer work */
.order-sheet-right{
  display:flex;flex-direction:column;
  min-height:0;overflow:hidden;
  border-radius:0 40px 0 0;
  background:#fff;
}

/* Scrollable content area */
.order-sheet-scroll{
  flex:1;
  overflow-y:auto;
  min-height:0;
  scrollbar-width:thin;
  scrollbar-color:var(--choco-100) transparent;
}
.order-sheet-scroll::-webkit-scrollbar{width:4px;}
.order-sheet-scroll::-webkit-scrollbar-track{background:transparent;}
.order-sheet-scroll::-webkit-scrollbar-thumb{background:var(--choco-100);border-radius:10px;}

/* Sticky bottom bar — qty + add button always visible */
.order-sheet-footer{
  flex-shrink:0;
  padding:13px 32px 12px;
  background:#fff;
  border-top:1px solid var(--border);
  display:flex;align-items:center;gap:16px;
}
.order-sheet-footer .qty-row{
  display:flex;align-items:center;gap:10px;
  flex-shrink:0;
}
.order-sheet-footer .qty-btn{
  width:38px;height:38px;border-radius:50%;
  background:var(--off-white);color:var(--text-dark);
  font-size:20px;font-weight:500;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;border:2px solid var(--border);
  cursor:pointer;
}
.order-sheet-footer .qty-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.order-sheet-footer .qty-val{font-size:18px;font-weight:500;color:var(--text-dark);min-width:28px;text-align:center;}
.order-sheet-footer .add-btn{
  flex:1;margin-top:0;
  padding:14px 20px;
}

/* Close button — top right of sheet */
.order-sheet-close{
  position:absolute;top:18px;right:20px;z-index:10;
  width:38px;height:38px;border-radius:50%;
  background:var(--off-white);border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-dark);transition:all 0.2s;cursor:pointer;
}
.order-sheet-close:hover{background:var(--accent);color:#fff;border-color:var(--accent);}

.order-modal-body{padding:28px 32px 20px;}
.order-product-name{font-size:24px;font-weight:500;color:var(--text-dark);margin-bottom:4px;letter-spacing:-0.5px;}
.order-product-sub{font-size:14px;color:var(--text-light);margin-bottom:24px;line-height:1.55;}
.order-section{margin-bottom:22px;}
.order-section-title{
  font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--text-mid);margin-bottom:11px;
  display:flex;justify-content:space-between;align-items:center;
}
.order-section-badge{
  font-size:10px;font-weight:500;text-transform:none;letter-spacing:0;
  background:var(--choco-50);color:var(--text-muted);
  padding:2px 8px;border-radius:20px;
}

/* Coffee type */
.coffee-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.coffee-type-option{
  border:2px solid var(--border);border-radius:var(--radius-sm);
  padding:13px 15px;cursor:pointer;transition:all 0.2s;background:#f7f7f7;
}
.coffee-type-option.selected{border-color:var(--accent);background:#f0f7e6;}
.coffee-type-option:hover:not(.selected){border-color:var(--accent-light);}
.ct-icon{margin-bottom:6px;}
.ct-label{font-size:14px;font-weight:500;color:var(--text-dark);}
.ct-sub{font-size:11px;color:var(--text-muted);margin-top:1px;}
/* Sugar */
.sugar-row{display:flex;align-items:center;gap:10px;}
.sugar-btn{
  width:34px;height:34px;border-radius:50%;
  background:#f0f0f0;color:var(--text-dark);font-size:18px;font-weight:500;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;flex-shrink:0;border:px solid var(--border);cursor:pointer;
}
.sugar-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.sugar-track{flex:1;height:5px;background:var(--border);border-radius:3px;position:relative;}
.sugar-fill{height:100%;background:var(--accent);border-radius:3px;transition:width 0.25s var(--ease);}
.sugar-label{font-size:13px;font-weight:500;color:var(--accent);min-width:72px;text-align:right;}
/* Extras */
.extras-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.extra-option{
  display:flex;align-items:center;gap:9px;
  border:1.5px solid var(--border);border-radius:var(--radius-sm);
  padding:10px 12px;cursor:pointer;transition:all 0.2s;background:#f7f7f7;
}
.extra-option.checked{border-color:var(--accent);background:#f0f7e6;}
.extra-check{
  width:19px;height:19px;border-radius:5px;border:1.5px solid var(--border);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:all 0.2s;
}
.extra-option.checked .extra-check{background:var(--accent);border-color:var(--accent);}
.extra-name{font-size:12px;font-weight:500;color:var(--text-dark);}
.extra-price{font-size:11px;color:var(--text-muted);}
/* Size */
.size-options{display:flex;gap:8px;}
.size-btn{
  flex:1;padding:11px 6px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  font-size:13px;font-weight:500;color:var(--text-mid);
  transition:all 0.2s;text-align:center;cursor:pointer;background:#f7f7f7;
}
.size-btn small{display:block;font-size:10px;font-weight:400;color:var(--text-muted);margin-top:2px;}
.size-btn.selected,.size-btn:hover{border-color:var(--accent);background:#f0f7e6;color:var(--accent);}
/* Notes */
.notes-input{
  width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  font-size:13px;color:var(--text-dark);background:#f7f7f7;
  outline:none;resize:none;transition:border-color 0.2s;font-family:var(--font);
}
.notes-input:focus{border-color:var(--accent);background:#fff;}
/* Add button */
.add-btn{
  flex:1;padding:15px 20px;border-radius:50px;
  background:var(--accent);color:#fff;
  font-size:15px;font-weight:500;letter-spacing:0.2px;
  transition:all 0.3s var(--ease);
  display:flex;justify-content:center;align-items:center;gap:12px;
  cursor:pointer;
}
.add-btn:hover{background:var(--accent-dark);}
.add-btn-sep{width:1px;height:18px;background:rgba(255,255,255,0.35);}

/* Mobile: stack vertically */
@media(max-width:720px){
  .order-sheet{max-width:100%;border-radius:28px 28px 0 0;height:calc(100vh - 40px);}
  .order-sheet-layout{grid-template-columns:1fr;grid-template-rows:260px 1fr;}
  /* On mobile the image is top — only top corners get the sheet's radius */
  .order-sheet-img-col{height:260px;border-radius:28px 28px 0 0;}
  .order-sheet-img-col img{position:absolute;}
  /* Right column loses its desktop top-right radius on mobile */
  .order-sheet-right{border-radius:0;min-height:0;}
  .order-modal-body{padding:18px 20px 16px;}
  .order-sheet-footer{padding:12px 20px 20px;gap:12px;}
}

/* ═══════════════════════════════════════════
   MOBILE SEARCH — icon tap → full header expand
═══════════════════════════════════════════ */
.pkc-mobile-search-btn{
  display:none;
  width:40px;height:40px;border-radius:50%;
  align-items:center;justify-content:center;
  background:transparent;color:var(--text-mid);
  transition:all 0.2s;flex-shrink:0;
}
.pkc-mobile-search-btn:hover{background:var(--choco-50);color:var(--accent);}
@media(max-width:900px){
  .pkc-mobile-search-btn{display:flex;}
}

/* The bar that slides down — NO overflow:hidden so results can spill */
.pkc-mobile-search-overlay{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1600;
  background:#fff;
  padding:0 16px;
  display:flex;align-items:center;gap:12px;
  height:0;
  opacity:0;
  pointer-events:none;
  transition:height 0.3s cubic-bezier(0.32,0.72,0,1), opacity 0.22s ease;
 
}
.pkc-mobile-search-overlay.open{
  height:66px;
  opacity:1;
  pointer-events:all;
}
.pkc-mobile-search-overlay .back-btn{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--off-white);color:var(--text-dark);
  border:none;cursor:pointer;
  transition:background 0.2s;
}
.pkc-mobile-search-overlay .back-btn:hover{background:var(--border);}
.pkc-mobile-search-overlay .search-inner{
  position:relative;flex:1;
}
.pkc-mobile-search-overlay .search-inner svg.search-ico{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--text-muted);pointer-events:none;z-index:1;
}
.pkc-mobile-search-overlay input{
  width:100%;padding:11px 16px 11px 38px;
  border:1.5px solid var(--border);border-radius:50px;
  background:#f7f7f7;font-family:var(--font);font-size:15px;
  color:var(--text-dark);outline:none;
  transition:border-color 0.2s, box-shadow 0.2s;
}
.pkc-mobile-search-overlay input:focus{
  border-color:var(--accent);background:#fff;
  box-shadow:0 0 0 3px rgba(120,183,42,0.12);
}

/* Full-screen results panel — separate from the bar so no clipping */
.pkc-mobile-search-panel{
  position:fixed;
  top:66px;left:0;right:0;bottom:0;
  z-index:1599;
  background:#fff;
  overflow-y:auto;
  opacity:0;pointer-events:none;
  transition:opacity 0.2s ease;
}
.pkc-mobile-search-panel.open{
  opacity:1;pointer-events:all;
}
.pkc-mobile-search-panel-inner{
  padding:8px 0 40px;
}
/* Reuse same result item styling */
.pkc-mobile-search-panel .pkc-search-result-item{
  display:flex;align-items:center;gap:14px;
  padding:14px 20px;cursor:pointer;
  border-bottom:1px solid var(--off-white);
  transition:background 0.15s;
}
.pkc-mobile-search-panel .pkc-search-result-item:active{background:var(--choco-50);}
.pkc-mobile-search-panel .pkc-search-result-img{
  width:52px;height:52px;border-radius:12px;object-fit:cover;flex-shrink:0;
}
.pkc-mobile-search-panel .pkc-search-result-info{flex:1;min-width:0;}
.pkc-mobile-search-panel .pkc-search-result-name{font-size:14px;font-weight:500;color:var(--text-dark);}
.pkc-mobile-search-panel .pkc-search-result-cat{font-size:12px;color:var(--text-muted);margin-top:2px;}
.pkc-mobile-search-panel .pkc-search-result-price{font-size:14px;font-weight:500;color:var(--accent);flex-shrink:0;}
.pkc-mobile-search-panel .search-empty{
  padding:48px 20px;text-align:center;color:var(--text-muted);
}
.pkc-mobile-search-panel .search-empty svg{margin:0 auto 14px;display:block;opacity:0.3;}
.pkc-mobile-search-panel .search-empty p{font-size:15px;font-weight:500;color:var(--text-mid);}
.pkc-mobile-search-panel .search-empty span{font-size:13px;}
/* Dim backdrop behind panel but above page */
.pkc-mobile-search-dim{
  position:fixed;inset:0;z-index:1598;
  background:rgba(0,0,0,0.35);
  opacity:0;pointer-events:none;
  transition:opacity 0.25s ease;
}
.pkc-mobile-search-dim.open{opacity:1;pointer-events:all;}
.video-section{padding:96px 0;background:var(--cream);}
.video-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.video-frame{
  position:relative;border-radius:4px;overflow:hidden;
  aspect-ratio:4/3;background:var(--choco-700);
  box-shadow:var(--shadow-lg);cursor:pointer;
}
.video-thumb{width:100%;height:100%;object-fit:cover;display:block;}
.video-play-overlay{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  background:rgba(26,12,2,0.22);
  transition:background 0.3s;
}
.video-frame:hover .video-play-overlay{background:rgba(26,12,2,0.38);}
.play-circle{
  width:78px;height:78px;border-radius:50%;
  background:rgba(255,255,255,0.93);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  transition:transform 0.3s var(--ease-bounce),box-shadow 0.3s;
  box-shadow:0 8px 32px rgba(0,0,0,0.25);
}
.video-frame:hover .play-circle{transform:scale(1.1);box-shadow:0 14px 40px rgba(0,0,0,0.3);}
.video-overlay-tag{
  position:absolute;bottom:20px;left:20px;z-index:3;
  background:rgba(255,255,255,0.95);backdrop-filter:blur(8px);
  border-radius:50px;padding:9px 18px;
  display:flex;align-items:center;gap:10px;
  box-shadow:0 4px 16px rgba(0,0,0,0.1);
}
.live-dot{width:8px;height:8px;border-radius:50%;background:#22A35A;animation:livePulse 2s ease-in-out infinite;}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.5;transform:scale(1.4);}}
.overlay-tag-text{font-size:12px;font-weight:500;color:var(--text-dark);}
.video-text .section-title{margin-bottom:14px;}
.video-features{margin-top:30px;display:flex;flex-direction:column;gap:18px;}
.vfeature{display:flex;align-items:flex-start;gap:14px;}
.vfeature-icon{
  width:44px;height:44px;border-radius:11px;flex-shrink:0;
  background:var(--choco-50);border:1px solid var(--choco-100);
  display:flex;align-items:center;justify-content:center;
}
.vfeature-text h4{font-size:14px;font-weight:500;color:var(--text-dark);margin-bottom:2px;}
.vfeature-text p{font-size:13px;color:var(--text-light);line-height:1.6;}

/* VIDEO PLAYER MODAL */
.video-modal-overlay{
  position:fixed;inset:0;z-index:5000;
  background:rgba(0,0,0,0.92);
  opacity:0;visibility:hidden;
  transition:all 0.35s var(--ease);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.video-modal-overlay.open{opacity:1;visibility:visible;}
.video-modal-inner{
  position:relative;width:100%;max-width:900px;
  transform:scale(0.94);transition:transform 0.4s var(--ease);
}
.video-modal-overlay.open .video-modal-inner{transform:scale(1);}
.video-modal-close{
  position:absolute;top:-48px;right:0;
  display:flex;align-items:center;gap:8px;
  color:rgba(255,255,255,0.7);font-size:14px;font-weight:500;
  transition:color 0.2s;cursor:pointer;background:none;border:none;font-family:var(--font);
}
.video-modal-close:hover{color:#fff;}
.video-embed-wrap{
  width:100%;aspect-ratio:16/9;
  border-radius:4px;overflow:hidden;background:#000;
  display:flex;align-items:center;justify-content:center;
}
.video-embed-wrap video{width:100%;height:100%;object-fit:cover;}
.video-placeholder-inner{
  text-align:center;color:rgba(255,255,255,0.5);
}
.video-placeholder-inner svg{margin:0 auto 16px;}
.video-placeholder-inner p{font-size:15px;font-weight:500;}
.video-placeholder-inner span{font-size:13px;display:block;margin-top:4px;opacity:0.6;}

/* ═══════════════════════════════════════════
   BRANCHES
═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
   BRANCHES — immersive strip layout
═══════════════════════════════════════════ */
.branches-section{
  padding:0;background:var(--cream);overflow:hidden;
}
.branches-header{
  padding:80px 0 52px;text-align:center;
}
.branches-strip{
  position:relative;
  display:flex;align-items:stretch;
  border-top:1px solid var(--border);
  min-height:340px;
  transition:background 0.4s var(--ease);
  overflow:hidden;
}
.branches-strip:last-child{border-bottom:1px solid var(--border);}
.branches-strip::before{
  content:'';
  position:absolute;inset:0;
  background:var(--choco-700);
  opacity:0;
  transition:opacity 0.4s var(--ease);
  pointer-events:none;
}

.branch-strip-num{
  flex-shrink:0;
  width:330px;
  display:flex;align-items:center;justify-content:center;
  font-size:80px;font-weight:500;
  color:var(--border);
  letter-spacing:-4px;
  position:relative;z-index:1;
  transition:color 0.4s var(--ease);
  border-right:1px solid var(--border);
}

.branch-strip-body{
  flex:1;padding:40px 102px;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;z-index:1;
  border-right:1px solid var(--border);
}
.branch-strip-eyebrow{
  font-size:10px;font-weight:500;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--accent);
  margin-bottom:10px;
  transition:color 0.4s var(--ease);
}

.branch-strip-name{
  font-size:clamp(26px,3vw,40px);font-weight:500;
  color:var(--text-dark);letter-spacing:-1px;
  line-height:1.05;margin-bottom:14px;
  transition:color 0.4s var(--ease);
}

.branch-strip-address{
  font-size:14px;color:var(--text-light);line-height:1.7;
  margin-bottom:22px;max-width:300px;
  transition:color 0.4s var(--ease);
}

.branch-strip-actions{display:flex;gap:10px;flex-wrap:wrap;}
.branch-strip-btn{
  padding:10px 22px;border-radius:50px;
  font-size:13px;font-weight:500;
  border:1px solid var(--accent-dark);color:var(--text-mid);
  background:transparent;
  transition:all 0.25s var(--ease);cursor:pointer;
  font-family:var(--font);
}
.branch-strip-btn:hover{background:#fff;border-color:#fff;color:var(--text-dark);}
.branch-strip-btn.primary{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
.branch-strip-btn.primary:hover{background:var(--accent-light);border-color:var(--accent-light);}
.branch-strip-btn{border-color:rgb(0, 0, 0);color:rgb(0, 0, 0);}
.branch-strip-btn:hover{background:rgba(0, 0, 0, 0.027);border-color:rgb(0, 0, 0);color:#000000;}
.branch-strip-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.branch-strip-meta{
  flex-shrink:0;width:580px;
  padding:40px 40px;
  display:flex;flex-direction:column;justify-content:center;gap:20px;
  position:relative;z-index:1;
}
.branch-meta-item{
  display:flex;flex-direction:column;gap:4px;
}
.branch-meta-label{
  font-size:10px;font-weight:500;letter-spacing:2px;text-transform:uppercase;
  color:var(--text-muted);
  transition:color 0.4s var(--ease);
}

.branch-meta-value{
  font-size:13px;font-weight:500;color:var(--text-dark);line-height:1.55;
  transition:color 0.4s var(--ease);
}

@media(max-width:900px){
  .branch-strip-num{width:70px;font-size:52px;}
  .branch-strip-body{padding:32px 28px;}
  .branch-strip-meta{width:200px;padding:32px 20px;}
}
@media(max-width:640px){
  .branches-strip{flex-direction:column;min-height:unset;}
  .branch-strip-num{
    width:100%;height:60px;
    border-right:none;border-bottom:1px solid var(--border);
    font-size:36px;justify-content:flex-start;padding:0 20px;
  }
  .branch-strip-body{padding:24px 20px;border-right:none;}
  .branch-strip-meta{width:100%;padding:20px 20px 28px;}
}

/* ═══════════════════════════════════════════
   APP DOWNLOAD SECTION (desktop only)
═══════════════════════════════════════════ */
.app-section{
  padding:96px 0;background:var(--choco-700);
  overflow:hidden;position:relative;
}
.app-section::before{
  content:'';position:absolute;top:-120px;right:-120px;
  width:500px;height:500px;border-radius:50%;
  background:rgba(0, 0, 0, 0.25);
  pointer-events:none;
}
.app-section::after{
  content:'';position:absolute;bottom:-80px;left:200px;
  width:300px;height:300px;border-radius:50%;
  background:rgba(181,118,61,0.1);
  pointer-events:none;
}
.app-layout{
  display:grid;grid-template-columns:1fr 480px;
  gap:60px;align-items:center;position:relative;z-index:1;
}
.app-text .section-label{color:var(--choco-200);}
.app-text .section-label::before{background:var(--choco-200);}
.app-text .section-title{color:#fff;}
.app-text .section-sub{color:rgba(255,255,255,0.6);max-width:400px;}
.app-badges{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;}
.app-badge{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);
  padding:11px 20px;border-radius:12px;color:#fff;
  transition:all 0.2s;cursor:pointer;
  backdrop-filter:blur(8px);
}
.app-badge:hover{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.25);}
.app-badge-text{text-align:left;}
.app-badge-text small{font-size:10px;opacity:0.6;display:block;letter-spacing:0.5px;text-transform:uppercase;}
.app-badge-text strong{font-size:15px;font-weight:500;}
.app-features{margin-top:28px;display:flex;flex-direction:column;gap:14px;}
.app-feature{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,0.75);font-size:14px;}
.app-feature-check{
  width:22px;height:22px;border-radius:50%;
  background:rgba(107,52,16,0.6);border:1px solid var(--choco-300);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
/* PHONE MOCKUP */
.phone-mockup-wrap{
  display:flex;justify-content:center;align-items:flex-end;
  padding-top:20px;
}
.phone-mockup{
  position:relative;width:300px;flex-shrink:0;
  filter:drop-shadow(0 40px 80px rgba(0,0,0,0.65));
}
.phone-svg-outer{
  width:100%;display:block;
}
.phone-screen-content{
  position:absolute;
  top:3.8%;left:6.2%;
  width:87.6%;height:92%;
  border-radius:40px;
  overflow:hidden;
  background:#0a0a0a;
}
.phone-screen-img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
@media(max-width:1000px){.app-section{display:none;}}



/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
pkc-footer{background:var(--text-dark);color:rgba(255,255,255,0.55);padding:60px 0 36px;display:block;}

/* ROW 1 — 5 link columns */
.pkc-footer-cols{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:32px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,0.07);
  margin-bottom:36px;
}
.pkc-footer-col{}
.pkc-footer-col-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:18px;
}
.pkc-footer-col-head h4{
  font-size:10px;font-weight:500; font-size: 17px;
  color:rgba(255,255,255,0.35);
  margin:0;
}
.pkc-footer-col-chevron{
  display:none;
  color:rgba(255,255,255,0.35);
  transition:transform 0.3s var(--ease);
  flex-shrink:0;
}
.pkc-footer-col.open .pkc-footer-col-chevron{transform:rotate(180deg);}
.pkc-footer-col-body{display:flex;flex-direction:column;gap:10px;}
.pkc-footer-col-body a{font-size:17px; margin-bottom: 15px; color:rgb(255, 255, 255);transition:color 0.2s;display:block;}
.pkc-footer-col-body a:hover{color:#fff;}

/* ROW 2 — Social icons */
.pkc-footer-social-row{
  display:flex;flex-direction:row;align-items:center;gap:8px;
  margin-bottom:20px;
}
.pkc-social-link{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,0.07);
  display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;flex-shrink:0;
}
.pkc-social-link:hover{background:var(--accent);}

/* ROW 3 — Legal links */
.pkc-footer-legal-row{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  margin-bottom:24px;
}
.pkc-footer-legal-row a{font-size:17px; margin-bottom:10px; color:rgba(255, 255, 255, 0.822);transition:color 0.2s;}
.pkc-footer-legal-row a:hover{color:#fff;}

/* ROW 4 — Copyright */
.pkc-footer-copyright{
  font-size:12px;color:rgba(255,255,255,0.3);
}

/* ═══════════════════════════════════════════
   FOOTER MOBILE ACCORDION
═══════════════════════════════════════════ */
@media(max-width:768px){
  .pkc-footer-cols{
    grid-template-columns:1fr;
    gap:0;
    padding-bottom:28px;
    margin-bottom:28px;
  }
  .pkc-footer-col{
    border-bottom:1px solid rgba(255,255,255,0.07);
  }
  .pkc-footer-col:first-child{
    border-top:1px solid rgba(255,255,255,0.07);
  }
  .pkc-footer-col-head{
    padding:14px 0;
    margin-bottom:0;
    cursor:pointer;
    user-select:none;
  }
  .pkc-footer-col-chevron{display:block;}
  .pkc-footer-col-body{
    overflow:hidden;
    max-height:0;
    gap:0;
    transition:max-height 0.35s var(--ease), padding 0.35s var(--ease);
    padding-bottom:0;
  }
  .pkc-footer-col.open .pkc-footer-col-body{
    max-height:300px;
    padding-bottom:16px;
  }
  .pkc-footer-col-body a{
    padding:6px 0;
  }
  .pkc-footer-social-row{margin-bottom:18px;}
  .pkc-footer-legal-row{flex-direction:column;gap:10px;}
}

/* ═══════════════════════════════════════════
   BOTTOM BAR
═══════════════════════════════════════════ */
.page-bottom-pad{height:var(--bottom-bar-h);}
.bottom-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:800;
  background:#0D2E1D;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  
  height:var(--bottom-bar-h);
  display:flex;align-items:center;justify-content:center;
  padding:0 20px;
  box-sizing:border-box;
  width:100%;
}
.bottom-bar-inner{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;max-width:1300px;
  gap:16px;
}
.bottom-location{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:8px 12px;border-radius:12px;transition:background 0.2s;
  flex:1;min-width:0; width: fit-content; 
}
.bottom-location:hover{background:#e8f0eb1f;}
.location-pin-icon{
  width:36px;height:36px;border-radius:10px;
  background:var(--choco-50);border:1px solid var(--choco-100);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.location-info{min-width:0; border-bottom: 1px solid #fff;}
.location-label{font-size:10px;color:var(--text-muted);font-weight:500;letter-spacing:0.8px;text-transform:uppercase;display:block;}
.location-name{font-size:14px;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px;}
.loc-chevron{flex-shrink:0;}
.bottom-divider{width:1px;height:32px;background:var(--border);flex-shrink:0;}
.bottom-cart-btn{
  display:flex;align-items:center;gap:10px;
  background:var(--accent);color:#fff;
  padding:11px 22px;border-radius:50px;
  font-size:14px;font-weight:500;
  transition:all 0.2s;flex-shrink:0;
}
.bottom-cart-btn:hover{background:var(--accent-dark);}
.cart-icon-wrap{position:relative;display:flex;align-items:center;}
.cart-icon-badge{
  position:absolute;top:-7px;right:-7px;
  background:#fff;color:var(--accent);
  font-size:9px;font-weight:500;
  width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--accent);
  line-height:1;
}

/* ═══════════════════════════════════════════
   CART SIDE PANEL
═══════════════════════════════════════════ */
.cart-overlay{
  position:fixed;inset:0;z-index:1800;
  background:rgba(26,12,2,0.45);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:all 0.4s var(--ease);
}
.cart-overlay.open{opacity:1;visibility:visible;}
.cart-panel{
  position:absolute;top:0;right:0;
  width:100%;max-width:440px;height:100%;
  background:#fff;
  transform:translateX(100%);
  transition:transform 0.42s var(--ease);
  display:flex;flex-direction:column;
  box-shadow:-16px 0 50px rgba(0,0,0,0.10);
}
.cart-overlay.open .cart-panel{transform:translateX(0);}
.cart-panel-header{
  padding:22px 24px;display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.cart-panel-title{font-size:19px;font-weight:600;color:var(--text-dark);letter-spacing:-0.3px;}
.cart-panel-close{
  width:34px;height:34px;border-radius:50%;background:var(--off-white);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-dark);transition:all 0.2s;
}
.cart-panel-close:hover{background:var(--accent);color:#fff;}
.cart-panel-branch{
  padding:12px 24px;border-bottom:1px solid var(--border);
  background:var(--choco-50);flex-shrink:0;
}
.cart-branch-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;color:var(--text-muted);margin-bottom:8px;display:block;}
.cart-branch-select{display:flex;gap:7px;}
.cart-branch-opt{
  flex:1;padding:8px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  background:#fff;font-size:12px;font-weight:500;color:var(--text-mid);
  text-align:center;transition:all 0.2s;cursor:pointer;
}
.cart-branch-opt.selected{border-color:var(--accent);background:var(--accent);color:#fff;}
.cart-panel-body{flex:1;overflow-y:auto;padding:16px 24px;}
.cart-panel-body::-webkit-scrollbar{width:4px;}
.cart-panel-body::-webkit-scrollbar-track{background:transparent;}
.cart-panel-body::-webkit-scrollbar-thumb{background:var(--choco-100);border-radius:10px;}
.cart-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;text-align:center;gap:10px;padding:40px 20px;
}
.cart-empty-icon{opacity:0.4;}
.cart-empty p{font-size:15px;font-weight:500;color:var(--text-dark);}
.cart-empty small{font-size:13px;color:var(--text-muted);}
.cart-item-row{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 0;border-bottom:1px solid var(--border);
}
.cart-item-img{
  width:68px;height:68px;border-radius:10px;overflow:hidden;flex-shrink:0;
  background:var(--choco-50);
}
.cart-item-img img{width:100%;height:100%;object-fit:cover;}
.cart-item-details{flex:1;min-width:0;}
.cart-item-name{font-size:13px;font-weight:500;color:var(--text-dark);margin-bottom:2px;}
.cart-item-customization{font-size:11px;color:var(--text-muted);margin-bottom:8px;line-height:1.4;}
.cart-item-actions{display:flex;justify-content:space-between;align-items:center;}
.cart-qty-ctrl{display:flex;align-items:center;gap:7px;}
.cart-qty-btn{
  width:26px;height:26px;border-radius:50%;
  background:var(--off-white);color:var(--text-dark);
  font-size:15px;font-weight:500;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;
}
.cart-qty-btn:hover{background:var(--accent);color:#fff;}
.cart-qty-num{font-size:13px;font-weight:500;color:var(--text-dark);}
.cart-item-price{font-size:14px;font-weight:500;color:var(--accent);}
.cart-remove{font-size:11px;color:var(--text-muted);text-decoration:underline;transition:color 0.2s;margin-top:4px;display:block;background:none;border:none;cursor:pointer;font-family:var(--font);padding:0;}
.cart-remove:hover{color:#c0392b;}
.cart-panel-footer{
  padding:18px 24px;border-top:1px solid var(--border);background:var(--off-white);flex-shrink:0;
}
.cart-summary{margin-bottom:14px;}
.cart-summary-row{
  display:flex;justify-content:space-between;
  font-size:13px;color:var(--text-light);margin-bottom:7px;
}
.cart-summary-row.total{
  font-size:17px;font-weight:500;color:var(--text-dark);
  padding-top:8px;border-top:1px solid var(--border);margin-top:8px;
}
.checkout-btn{
  width:100%;padding:14px;border-radius:50px;
  background:var(--accent);color:#fff;
  font-size:14px;font-weight:500;
  transition:all 0.3s;
  display:flex;justify-content:center;align-items:center;gap:8px;
}
.checkout-btn:hover{background:var(--accent-dark);}

/* ═══════════════════════════════════════════
   CHECKOUT MODAL
═══════════════════════════════════════════ */
.checkout-overlay{
  position:fixed;inset:0;background:rgba(26,12,2,0.65);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  z-index:3000;opacity:0;visibility:hidden;
  transition:all 0.4s var(--ease);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.checkout-overlay.open{opacity:1;visibility:visible;}
.checkout-modal{
  background:#fff;border-radius:24px;
  width:100%;max-width:500px;
  max-height:90vh;overflow:hidden;
  display:flex;flex-direction:column;
  transform:scale(0.93);transition:transform 0.4s var(--ease);
  box-shadow:0 40px 100px rgba(26,12,2,0.3);
}
.checkout-overlay.open .checkout-modal{transform:scale(1);}
.checkout-modal-header{
  padding:22px 26px;border-bottom:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;
  flex-shrink:0;background:#fff;z-index:2;border-radius:24px 24px 0 0;
}
.checkout-modal-header h2{font-size:19px;font-weight:800;color:var(--text-dark);letter-spacing:-0.3px;}
.checkout-modal-body{
  padding:24px 26px 28px;
  overflow-y:auto;flex:1;
  border-radius:0 0 24px 24px;
}
.checkout-modal-body::-webkit-scrollbar{width:4px;}
.checkout-modal-body::-webkit-scrollbar-track{background:transparent;}
.checkout-modal-body::-webkit-scrollbar-thumb{background:var(--choco-100);border-radius:10px;}
.form-group{margin-bottom:14px;}
.form-group label{
  display:block;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.8px;
  color:var(--text-mid);margin-bottom:6px;
}
.form-input{
  width:100%;padding:12px 14px;
  border:1.5px solid var(--border);border-radius:var(--radius-sm);
  font-size:13px;color:var(--text-dark);
  font-family:var(--font);outline:none;
  transition:border-color 0.2s;background:#fff;
}
.form-input:focus{border-color:var(--accent);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.form-divider{height:1px;background:var(--border);margin:18px 0;}
.form-section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;color:var(--text-mid);margin-bottom:12px;display:block;}
.payment-icons{display:flex;gap:7px;margin-bottom:14px;}
.pay-icon{
  display:flex;align-items:center;gap:8px;
  padding:9px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  font-size:13px;font-weight:600;color:var(--text-mid);
  cursor:pointer;transition:all 0.2s;background:#fff;
}
.pay-icon:hover,.pay-icon.active{border-color:var(--accent);background:var(--choco-50);color:var(--accent);}
.order-submit{
  width:100%;padding:15px;background:var(--accent);color:#fff;
  border-radius:50px;font-size:14px;font-weight:700;
  transition:all 0.3s;margin-top:18px;display:flex;align-items:center;justify-content:center;gap:8px;
}
.order-submit:hover{background:var(--accent-dark);}

/* ═══════════════════════════════════════════
   BRANCH SHEET
═══════════════════════════════════════════ */
.branch-select-overlay{
  position:fixed;inset:0;background:rgba(26,12,2,0.5);
  backdrop-filter:blur(8px);z-index:2500;
  opacity:0;visibility:hidden;transition:all 0.3s;
  display:flex;align-items:flex-end;justify-content:center;
}
.branch-select-overlay.open{opacity:1;visibility:visible;}
.branch-select-sheet{
  background:#fff;border-radius:24px 24px 0 0;
  width:100%;max-width:540px;padding:24px 24px 32px;
  transform:translateY(100%);transition:transform 0.4s var(--ease);
}
.branch-select-overlay.open .branch-select-sheet{transform:translateY(0);}
.sheet-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 22px;}
.sheet-title{font-size:19px;font-weight:800;color:var(--text-dark);margin-bottom:6px;letter-spacing:-0.3px;}
.sheet-sub{font-size:13px;color:var(--text-muted);margin-bottom:20px;}
.sheet-branch-opts{display:flex;flex-direction:column;gap:10px;}
.sheet-branch-card{
  display:flex;gap:14px;align-items:center;
  border:1.5px solid var(--border);border-radius:var(--radius-sm);
  padding:14px;cursor:pointer;transition:all 0.2s;
}
.sheet-branch-card.selected{border-color:var(--accent);background:var(--choco-50);}
.sheet-branch-card:hover{border-color:var(--accent-light);}
.sheet-branch-icon{
  width:42px;height:42px;border-radius:10px;
  background:var(--choco-50);border:1px solid var(--choco-100);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sheet-branch-info h4{font-size:14px;font-weight:700;color:var(--text-dark);}
.sheet-branch-info p{font-size:12px;color:var(--text-muted);}
.sheet-selected-mark{margin-left:auto;color:var(--accent);opacity:0;flex-shrink:0;}
.sheet-branch-card.selected .sheet-selected-mark{opacity:1;}
.sheet-confirm{
  width:100%;padding:13px;background:var(--accent);color:#fff;
  border-radius:50px;font-size:14px;font-weight:700;margin-top:18px;transition:all 0.2s;
}
.sheet-confirm:hover{background:var(--accent-dark);}

/* ═══════════════════════════════════════════
   HEADER CONTACT INFO
═══════════════════════════════════════════ */
.pkc-header-contact{
  display:flex;align-items:center;gap:20px;
  margin-right:8px;
}
.pkc-header-contact-item{
  display:flex;align-items:center;gap:6px;
  font-size:13px;color:#00000094;font-weight:500;
  white-space:nowrap;
}
.pkc-header-contact-item svg{flex-shrink:0;color:var(--accent);}
.pkc-header-contact-item a{color:#071A10;}
.pkc-header-contact-item a:hover{color:var(--accent);}
@media(max-width:900px){.pkc-header-contact{display:none;}}

/* ═══════════════════════════════════════════
   FAVOURITES SIDEBAR PANEL
═══════════════════════════════════════════ */
.fav-overlay{
  position:fixed;inset:0;z-index:1800;
  background:rgba(7,26,16,0.45);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:all 0.4s var(--ease);
}
.fav-overlay.open{opacity:1;visibility:visible;}
.fav-panel{
  position:absolute;top:0;right:0;
  width:100%;max-width:400px;height:100%;
  background:#fff;
  transform:translateX(100%);
  transition:transform 0.42s var(--ease);
  display:flex;flex-direction:column;
  box-shadow:-16px 0 50px rgba(0,0,0,0.10);
}
.fav-overlay.open .fav-panel{transform:translateX(0);}
.fav-panel-header{
  padding:22px 24px;display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.fav-panel-title{font-size:19px;font-weight:800;color:var(--text-dark);letter-spacing:-0.3px;display:flex;align-items:center;gap:8px;}
.fav-panel-close{
  width:34px;height:34px;border-radius:50%;background:var(--off-white);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-dark);transition:all 0.2s;
}
.fav-panel-close:hover{background:var(--accent);color:#fff;}
.fav-panel-body{flex:1;overflow-y:auto;padding:16px 24px;}
.fav-panel-body::-webkit-scrollbar{width:4px;}
.fav-panel-body::-webkit-scrollbar-track{background:transparent;}
.fav-panel-body::-webkit-scrollbar-thumb{background:var(--choco-100);border-radius:10px;}
.fav-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;text-align:center;gap:10px;padding:40px 20px;
}
.fav-empty p{font-size:15px;font-weight:600;color:var(--text-dark);}
.fav-empty small{font-size:13px;color:var(--text-muted);}
.fav-item-row{
  display:flex;gap:12px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--border);
}
.fav-item-img{
  width:68px;height:68px;border-radius:10px;overflow:hidden;flex-shrink:0;
  background:var(--choco-50);
}
.fav-item-img img{width:100%;height:100%;object-fit:cover;}
.fav-item-details{flex:1;min-width:0;}
.fav-item-name{font-size:13px;font-weight:700;color:var(--text-dark);margin-bottom:2px;}
.fav-item-desc{font-size:11px;color:var(--text-muted);margin-bottom:6px;}
.fav-item-price{font-size:14px;font-weight:800;color:var(--accent);}
.fav-order-btn{
  padding:7px 14px;background:var(--accent);color:#fff;
  border-radius:50px;font-size:12px;font-weight:700;
  transition:all 0.2s;flex-shrink:0;
}
.fav-order-btn:hover{background:var(--accent-dark);}
.fav-remove-btn{
  background:none;border:none;cursor:pointer;color:var(--text-muted);
  font-size:11px;text-decoration:underline;padding:0;margin-top:4px;display:block;
  font-family:var(--font);transition:color 0.2s;
}
.fav-remove-btn:hover{color:#c0392b;}

/* ═══════════════════════════════════════════
   ORDER MODAL — TWO COLUMN LAYOUT
═══════════════════════════════════════════ */
.order-modal-2col{
  display:grid;
  grid-template-columns:220px 1fr;
  min-height:80vh;
}
.order-modal-img-col{
  position:relative;overflow:hidden;
  background:var(--choco-50);
  flex-shrink:0;
  border-radius:24px 0 0 24px;
}
.order-modal-img-col img{
  width:100%;height:100%;object-fit:cover;
  position:absolute;inset:0;
}
.order-modal-img-col::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,0.2),transparent 50%);
}
.order-modal-scroll{
  flex:1;overflow-y:auto;
  border-radius:0 24px 24px 0;
  max-height:88vh;
}
.order-modal-scroll::-webkit-scrollbar{width:4px;}
.order-modal-scroll::-webkit-scrollbar-track{background:transparent;}
.order-modal-scroll::-webkit-scrollbar-thumb{background:var(--choco-100);border-radius:10px;}
.order-modal-scroll::-webkit-scrollbar-thumb:hover{background:var(--choco-200);}
@media(max-width:640px){
  .order-modal-2col{grid-template-columns:1fr;min-height:unset;}
  .order-modal-img-col{height:180px;border-radius:24px 24px 0 0;}
  .order-modal-img-col img{position:static;width:100%;height:100%;}
  .order-modal-scroll{border-radius:0 0 24px 24px;max-height:calc(90vh - 180px);}
}

/* Mobile nav contact info */
.mobile-nav-contact{
  padding-top:16px; padding-bottom: 16px;
  border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:10px;
  margin-top:4px;
}
.mobile-nav-contact-item{
  display:flex;align-items:center;gap:10px;
  font-size:14px;color:var(--text-light);
}
.mobile-nav-contact-item a{color:var(--text-light);}
.pkc-mobile-nav{
  position:fixed;inset:0;z-index:1500;
  background:var(--cream);
  transform:translateX(-100%);transition:transform 0.4s var(--ease);
  padding:80px 28px 36px;display:flex;flex-direction:column;
}
.pkc-mobile-nav.open{transform:translateX(0);}
.pkc-mobile-nav-close{
  position:absolute;top:22px;right:22px;
  width:38px;height:38px;border-radius:50%;
  background:var(--off-white);display:flex;align-items:center;justify-content:center;
  color:var(--text-dark);
}
.pkc-mobile-nav-links{display:flex;flex-direction:column;gap:6px;flex:1;}
.pkc-mobile-nav-links a{
  font-size:26px;font-weight:800;color:var(--text-dark);
  padding:10px 0;border-bottom:1px solid var(--border);
  transition:color 0.2s;display:flex;justify-content:space-between;align-items:center;
}
.pkc-mobile-nav-links a:hover{color:var(--accent);}
.pkc-mobile-nav-footer{padding-top:22px; border-top:1px solid var(--border);}
.pkc-mobile-nav-footer p{font-size:12px;color:var(--text-muted);}

/* TOAST */
.toast{
  position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(80px);
  background:var(--choco-700);color:#fff;
  padding:12px 22px;border-radius:50px;
  font-size:13px;font-weight:600;
  z-index:5000;opacity:0;transition:all 0.4s var(--ease-bounce);
  box-shadow:0 8px 24px rgba(26,12,2,0.25);
  white-space:nowrap;pointer-events:none;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media(max-width:1100px){
  .products-row,.products-extra{grid-template-columns:repeat(3,1fr);}
  .app-layout{grid-template-columns:1fr 380px;}
}
@media(max-width:900px){
  .pkc-header{
    top:10px;width:calc(100% - 24px);
    padding:10px 14px;border-radius:50px;
    flex-wrap:nowrap;gap:0;
    transition:transform 0.4s var(--ease), padding 0.3s var(--ease), box-shadow 0.3s, top 0.3s var(--ease), width 0.3s var(--ease), background 0.3s;
  }
  .pkc-header.scrolled{padding:8px 12px;}
  /* Desktop search bar: hidden on mobile */
  .pkc-search-wrap{display:none;}
  .container{padding:0 20px;}
  .pkc-nav-links{display:none;}
  .pkc-menu-toggle{display:flex;}
  .hero-bg{width:100%;opacity:1;border-radius:0;}
  .hero-bg::after{background:linear-gradient(to bottom,rgba(0,0,0,0.55),rgba(0,0,0,0.3));}
  .hero-content{padding:100px 0 60px;max-width:100%;grid-template-columns:1fr;}
  .hero-text-col{max-width:100%;}
  .hero h1{font-size:44px;letter-spacing:-1.5px;}
  .video-layout{grid-template-columns:1fr;gap:36px;}
  .products-row,.products-extra{grid-template-columns:repeat(2,1fr);}
  .branches-grid{grid-template-columns:1fr;}
  .app-section{display:none;}
  .testimonials-grid{grid-template-columns:1fr 1fr;} .crns-section-wrapper {display: none;}
}
@media(max-width:640px){
  .container{padding:0 16px;}
  .pkc-header{top:8px;width:calc(100% - 20px);padding:9px 12px;border-radius:50px;}
  .hero h1{font-size:34px;letter-spacing:-1px;}
  .hero-sub{font-size:15px;}
  .hero-actions{flex-direction:column;align-items:flex-start;}
  .products-row,.products-extra{grid-template-columns:repeat(2,1fr);gap:12px;}
  .crns-section-wrapper{display:none;}
  .cart-panel{max-width:100%;}
  .fav-panel{max-width:100%;}
  .branch-card{flex-direction:column;gap:12px;}
  .form-row{grid-template-columns:1fr;}
}
@media(max-width:420px){
  .products-row,.products-extra{grid-template-columns:1fr 1fr;}
  .hero h1{font-size:30px;}
}