.announce, .announce *,
  header, header *,
  .jb-mobile-nav, .jb-mobile-nav *,
  .desktop-whatsapp-sticky, .desktop-whatsapp-sticky *,
  .breadcrumb, .breadcrumb *,
  .pdp, .pdp *,
  .pdp input, .pdp select, .pdp textarea, .pdp button{
    font-family:'Poppins', sans-serif !important;
}
:root{
  --blueberry-pie:#1D364D;
  --macaron-plus:#3C4B64;
  --berry:#566D8A;
  --livid-macaron:#AECDDD;
  --pearl-white:#F5F8FB;
  --unhatched:#E8EAE4;
  --creamwhip:#E3CBA9;
  --golden-brown:#93400C;
  --rich-black:#000;
  --field:#E7EAEE;
  --chip:#E2E9EF;
  --line:#C9D0D8;
  --star:#F0A500;
  --gst-ink:#5C8A6B;
  --gst-bg:#EAF4EE;
  --r-sm:8px; --r-md:10px; --r-lg:14px;
  --shell:1440px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--unhatched);color:var(--macaron-plus);font-family:"Poppins";font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select{font:inherit;color:var(--blueberry-pie)}
:focus-visible{outline:2px solid var(--blueberry-pie);outline-offset:2px;border-radius:4px}
.pdp{margin:0 auto;padding:30px var(--gutter);display:grid;grid-template-columns:minmax(0,660px) minmax(0,1fr);gap:40px;align-items:start;}
@media (min-width: 1250px) {
    .gallery {
        position: sticky;
    }
}
.gallery{top:24px;bottom:24px;align-self:start;padding-bottom:12px;}
.stage{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:653/510;background:#3A1A1C}
.stage img{width:100%;height:100%;object-fit:cover}
.wish{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:var(--r-sm);background:#fff;display:grid;place-items:center;color:var(--golden-brown);box-shadow:0 2px 8px rgba(29,54,77,.14);}
.wish.is-active svg{fill:currentColor}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}
.thumb{border-radius:var(--r-md);overflow:hidden;aspect-ratio:207/200;background:#3A1A1C;padding:0}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb[aria-current="true"]{outline:2px solid var(--blueberry-pie);outline-offset:2px}
.head{display:flex;align-items:center;justify-content:space-between;gap:20px}
h1{margin:0;font-size:40px;line-height:1.2;font-weight:400;color:#19325C;}
.head h1{font-weight:400 !important;}
.rating1{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:3px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 10px;font-size:15px;font-weight:500;color:#3A4980;line-height:1.0;}
.rating1 svg{fill:#CDAF8C;width:14px;height:14px}
.rating1 .rating-count{font-size:.85em;color:#6b6b6b;font-weight:400;margin-left:2px}
.rule{border:0;border-top:2px solid #425671;margin:6px 0 12px}
.price{display:flex;align-items:baseline;gap:14px;margin-bottom:22px}
.price .now{font-size:40px;font-weight:400;line-height:48px;color:#000}
.price .was{font-size:18px;font-weight:600;color:#84461F;text-decoration:line-through}

/* ============ PRICE ROW: price left, serving estimate right ============ */
.price-row-wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:22px;
}
.price-row-wrap .price{margin-bottom:0}

/* GST reads as a footnote, not part of the number */
.price .gst-note{
  display:inline-block;
  font-size:12px;font-weight:500;line-height:1;
  color:#726868;
  /*background:var(--gst-bg);*/
  padding:4px 2px;border-radius:6px;
  white-space:nowrap;
  align-self:center;   /* .price is baseline-aligned; this centres the pill */
}
.breadcrumb{margin:0;}
.serving-info{background:#fff;border:1px solid #eee;border-radius:8px;padding:6px 14px;margin:0;font-size:.9em;color:#19325C;font-weight:600;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,0.06)}

/* ============ PINCODE PANEL ============ */
.panel{background:var(--pearl-white);border-radius:var(--r-lg);padding:24px}
.panel[hidden]{display:none}
.pin-row{display:flex;gap:14px;margin-bottom:16px}
.pin-field{flex:1;display:flex;align-items:center;gap:10px;background:#E1E1DC;border:1px solid var(--line);border-radius:var(--r-sm);padding:0 16px;height:48px;color:var(--berry);}
.pin-field input{flex:1;min-width:0;border:0;background:none;height:100%;outline:none;font-size:14px;font-weight:500;text-overflow:ellipsis;}
.pin-field input::placeholder{color:var(--berry)}
.apply{flex:none;height:48px;padding:0 26px;border-radius:var(--r-sm);background:var(--blueberry-pie);color:#fff;font-weight:500;}
.panel h2{font-size:18px;font-weight:500;color:var(--blueberry-pie);margin:24px 0 16px}
.panel .rule{margin:12px 0}
.pin-msg{font-size:13px;margin:-4px 0 0;display:none}
.pin-msg.is-error{color:#B3261E;display:block}
.pin-msg.is-success{color:#1E7A46;display:block}
/*.pin-field input[aria-invalid="true"]{outline:1px solid #B3261E}*/
.pin-location{font-size:.85em;color:#19325C;font-weight:600;margin-top:4px}

/* ============ SURFACE BLOCK — shared bg for pincode panel + weight + notes ============ */
.surface-block{
  background:var(--pearl-white);
  border-radius:var(--r-lg);
  padding:24px;
}
.surface-block .panel{background:transparent;padding:0;border-radius:0}
.surface-block .weight{margin:26px 0 0}
.surface-block .notes{border:0;border-radius:0;padding:22px 0 0;margin-top:4px}

.weight{margin:26px 0 22px}
.weight h2{font-size:22px;font-weight:600;color:var(--blueberry-pie);margin:0 0 14px}
.pills{display:flex;flex-wrap:wrap;gap:14px}
.pill{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px;border-radius:var(--r-sm);background:#F6FAFF;color:var(--blueberry-pie);font-size:15px;}
.pill[hidden]{display:none}
.dot{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--berry);display:inline-block;position:relative}
.pill[aria-pressed="true"]{background:#DCE7F0}
.pill[aria-pressed="true"] .dot{border-color:var(--blueberry-pie)}
.pill[aria-pressed="true"] .dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--blueberry-pie);}
.pill.plain{background:#F6FAFF;border:1px solid var(--line);font-weight:500}

/* ============ NOTE INPUTS (Message on Cake / Special Instructions) ============ */
.note-input,.note-textarea{
  width:100%;border:0;border-radius:var(--r-sm);background:var(--field);
  padding:0 16px;outline:none;font-size:14px;margin-top:10px;color:var(--blueberry-pie);
  font-family:inherit;
}
.note-input{height:46px}
.note-textarea{min-height:68px;padding-top:12px;padding-bottom:12px;resize:vertical}
.note-input::placeholder,.note-textarea::placeholder{color:var(--berry)}
.note-count{flex:none;font-size:12px;color:var(--berry);white-space:nowrap}
.note-head-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 4px}
.note-head-row h3{margin:0}
.note-input+p{margin-top:8px}

.notes{border:1px solid var(--blueberry-pie);border-radius:12px;padding:22px 24px}
.note{display:flex;gap:14px}
.note svg{flex:none;margin-top:2px;color:var(--blueberry-pie)}
.note h3{margin:0 0 4px;font-size:18px;font-weight:500;color:var(--blueberry-pie)}
.note p{margin:0;font-size:14px;color:var(--macaron-plus)}
.note-body{flex:1;min-width:0}
.notes .rule{margin:18px 0}
.actions{display:flex;align-items:center;gap:16px;margin:24px 0;flex-wrap:wrap}
.qty{display:inline-flex;align-items:center;background:#91B4C8;border-radius:var(--r-sm);height:56px}
.qty button{width:34px;height:100%;font-size:20px;color:#fff}
.qty output{min-width:26px;text-align:center;font-weight:500;color:#fff}
.eggless{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 32px;border-radius:var(--r-sm);background:#91B4C8;color:#fff;font-size:17px;}
.eggless .dot{border-color:#fff}
.eggless[aria-pressed="true"] .dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--blueberry-pie)}
.cart{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:56px;padding:0 34px;border-radius:var(--r-sm);background:var(--blueberry-pie);color:#fff;font-size:17px;font-weight:500;}
.share{width:56px;height:56px;margin-left:auto;border-radius:var(--r-sm);background:var(--pearl-white);display:grid;place-items:center;color:var(--blueberry-pie);position:relative;}
.share[aria-pressed="true"]{background:#DCE7F0}
.share-toast{
  position:absolute;bottom:calc(100% + 10px);right:0;background:var(--blueberry-pie);color:#fff;
  font-size:12px;padding:6px 10px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;
  transform:translateY(4px);transition:opacity .18s ease,transform .18s ease;
}
.share-toast.is-visible{opacity:1;transform:translateY(0)}
.badges{background:var(--pearl-white);border-radius:12px;padding:15px 0px;display:grid;grid-template-columns:repeat(3,1fr);text-align:center;}
.badges div{display:grid;justify-items:center;gap:12px;color:var(--blueberry-pie);font-weight:500}
.tabs{margin-top:34px;display:grid;grid-template-columns:max-content max-content max-content 1fr;column-gap:44px;border-bottom:1px solid var(--line);}
.tab{grid-row:1;padding:0 0 12px;font-size:18px;font-weight:500;color:var(--macaron-plus);}
.tab[aria-selected="true"]{color:var(--blueberry-pie);font-weight:600;border-bottom:2px solid var(--blueberry-pie);margin-bottom:-1px;}
.tabpanel{grid-row:2;grid-column:1/-1;padding-top:26px}
.tabpanel[hidden]{display:none}
.tabpanel h3{font-size:22px;font-weight:600;color:var(--blueberry-pie);margin:0 0 14px}
.tabpanel h3+h3,.tabpanel ul+h3{margin-top:30px}
.tabpanel p{margin:0 0 16px;font-size:15px;line-height:1.72}
.tabpanel ul{margin:0;padding:0;list-style:none}
.tabpanel li{position:relative;padding-left:16px;margin-bottom:8px;font-size:15px;line-height:1.6}
.tabpanel li::before{content:"•";position:absolute;left:0;color:var(--macaron-plus)}
.review{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:16px}
.review-last{border-bottom:none !important;padding-bottom:16px;margin-bottom:16px}
.review strong{color:var(--blueberry-pie)}
.review .stars{color:var(--star);letter-spacing:2px;font-size:13px}
.num{font-weight:400!important;}

/* ============ ONLY ADDITIONS — nothing above this line was altered ============
 * 1. the two borders that were asked for
 * 2. two states the original CSS had no rule for: a locked Eggless
 *    button and the inline add-to-cart message
 * ========================================================================== */
.pin-field{border-color:var(--blueberry-pie)}
.pill{border:1px solid var(--line)}
.pill[aria-pressed="true"]{border-color:var(--blueberry-pie)}

.eggless{position:relative}
.eggless.is-locked{cursor:default}
.eggless-tip{
  position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px);
  background:var(--blueberry-pie);color:#fff;font-size:11px;font-weight:500;line-height:1.2;
  padding:6px 10px;border-radius:14px;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.eggless-tip.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- flavour selects + photo upload, same furniture as the note inputs ---- */
.field-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px}
.field{flex:1 1 220px;min-width:0;display:block}
.field-label{display:block;font-size:13px;font-weight:500;color:var(--blueberry-pie);margin:0 0 6px}
.field-select{width:100%;height:46px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;padding:0 14px;font-size:14px;color:var(--blueberry-pie);outline:none;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D364D' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:36px}
.field-select:focus{border-color:var(--blueberry-pie)}
.field-select:disabled{background-color:var(--field);color:var(--berry)}
.file-box{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;cursor:pointer;
  border:1px dashed var(--blueberry-pie);border-radius:var(--r-sm);background:#fff;color:var(--blueberry-pie);font-size:14px}
.file-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--berry)}
.file-box.has-file .file-name{color:var(--blueberry-pie)}
.photo-preview{display:flex;align-items:center;gap:12px;margin-top:12px}
.photo-preview img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.photo-remove{font-size:13px;color:#B3261E;text-decoration:underline}
.photo-msg{font-size:13px;margin:8px 0 0;color:var(--macaron-plus)}
.photo-msg.is-error{color:#B3261E}
.photo-msg.is-success{color:#1E7A46}
.is-busy{opacity:.6;pointer-events:none}
@media (max-width:900px){.field{flex:1 1 100%}}

.pdp-msg{margin:0 0 10px;font-size:14px;display:none}
.pdp-msg.is-error{display:block;color:#B3261E}
.pdp-msg.is-success{display:block;color:#1E7A46}

@media (max-width: 767px) {
    .pdp {
        padding: var(--gutter) !important;
    }
}
@media (max-width:900px){
.pdp{grid-template-columns:minmax(0,1fr);gap:0;padding:var(--gutter)!important;}
  .gallery,.details{min-width:0;}
  .gallery{position:static}
  .stage{aspect-ratio:322/258}
  .thumbs{gap:10px;margin-top:10px}
  .wish{display:none}
  h1{font-size:28px;padding-right:8px}
  .head{margin-top:10px}
  .rule{margin:6px 0 10px}
  .price .now{font-size:30px}

  /* ---- name on its own row, rating beneath it ----
     .head is a flex row by default; stacking it is what drops the
     rating under the title instead of alongside */
  .head{
    flex-direction:column;
    align-items:flex-start;
    gap:0;
  }
  .rating1{margin-top:10px}

  /* ---- price and serves stay side by side ----
     nowrap is what stops "Serves 6-8 people" dropping onto its own line */
  .price-row-wrap{
    flex-wrap:nowrap;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
  }
  .price-row-wrap .price{
    flex:0 1 auto;min-width:0;
    gap:8px;
  }
  .serving-info{flex:0 0 auto;padding:5px 10px;font-size:12px}

  /* the GST pill wraps under the number rather than squeezing serves */
  .price .gst-note{
    flex:1 0 100%;
    width:fit-content;
    margin-top:2px;
    font-size:11px;
  }

  .panel{padding:16px;border-radius:12px}
  .surface-block{padding:16px;border-radius:12px}
  .surface-block .panel{padding:0}
  .pin-row{flex-direction:column;gap:10px;margin-bottom:12px}
  .pin-field{height:46px}
  .apply{width:100%;height:46px}
  .panel h2{font-size:16px;margin:18px 0 12px}
  .weight{margin:22px 0 20px}
  .weight h2{font-size:20px}
  .pill{height:40px;padding:0 16px;font-size:14px}
  .pills{gap:10px}
  .notes{padding:18px}
  .note h3{font-size:16px}
  .actions{flex-wrap:wrap;gap:12px;margin:20px 0}
  .qty{height:48px}
  .eggless{flex:1;height:48px;padding:0 16px;font-size:15px}
  .share{margin-left:0;width:48px;height:48px}
  .cart{order:4;width:100%;height:52px}
  .badges{padding:20px 8px;font-size:14px}
  .badges div{gap:8px}
  .tabs{display:block;margin-top:28px}
  .tab{display:block;width:100%;padding:16px 0;border-bottom:1px solid var(--line);font-size:16px;}
  .tab[aria-selected="true"]{border-bottom:2px solid var(--blueberry-pie)}
  .tabs::after{display:none}
  .tabpanel{padding:22px 0 6px}
  .tabpanel h3{font-size:20px}
  .tabpanel p,.tabpanel li{font-size:14px}
}
@media (max-width:1250px) and (min-width:901px){
  .pdp{grid-template-columns:minmax(0,1fr);gap:24px;padding:var(--gutter);}
  .gallery,.details{min-width:0;}
}
.section-pad {
background:#F6FAFF;}
@media (prefers-reduced-motion:no-preference){
  .pill,.cart{transition:background-color .15s ease,color .15s ease}
}
@media (max-width:768px){
  .pin-field input{height:38px;}
  .serving-info{font-size:11px;padding:4px 8px}
}
/* Flavour heading under Upload Your Picture. Inherits .note h3 for size/weight/colour. */
.note-body .photo-flavour-head{margin-top:18px}