/* Shared cart drawer (all pages) */
.gjd{position:fixed;inset:0;z-index:150;visibility:hidden;transition:visibility 0s .6s}
.gjd.open{visibility:visible;transition:none}
.gjd .scrim{position:absolute;inset:0;background:rgba(21,17,13,.42);opacity:0;transition:opacity .45s}
.gjd.open .scrim{opacity:1}
.gjd .pnl{position:absolute;right:0;top:0;bottom:0;width:min(440px,100%);background:var(--paper,#F6F1E8);color:var(--ink,#15110D);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .6s cubic-bezier(.22,.8,.2,1);box-shadow:-30px 0 60px -30px rgba(0,0,0,.35)}
.gjd.open .pnl{transform:none}
.gjd .top{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid rgba(21,17,13,.1)}
.gjd .top b{font-family:var(--f-display,system-ui);font-stretch:88%;font-weight:800;font-size:22px;letter-spacing:-.015em;text-transform:uppercase}
.gjd .top b span{font-family:var(--f-body,system-ui);font-size:15px;font-weight:600;color:var(--ink-3,#766A5B);text-transform:none;letter-spacing:0;margin-left:6px}
.gjd .x{width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(21,17,13,.18);background:transparent;display:grid;place-items:center;cursor:pointer}
.gjd .x svg{width:18px;height:18px}
.gjd .items{flex:1;overflow:auto;padding:8px 24px;overscroll-behavior:contain}
.gjd .it{display:grid;grid-template-columns:76px 1fr auto;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid rgba(21,17,13,.1)}
.gjd .it .im{width:76px;height:76px;border-radius:14px;background:#F3E6CC;display:grid;place-items:center;padding:8px}
.gjd .it img{width:100%;height:100%;object-fit:contain}
.gjd .it b{display:block;font-size:16px}
.gjd .it small{display:block;font-size:14px;color:var(--ink-2,#5A4E42)}
.gjd .q{display:inline-flex;align-items:center;margin-top:8px;height:34px;border:1.5px solid rgba(21,17,13,.18);border-radius:99px}
.gjd .q button{width:32px;height:100%;border:0;background:transparent;font-size:17px;cursor:pointer}
.gjd .q span{min-width:20px;text-align:center;font-weight:800;font-size:15px}
.gjd .pr{text-align:right;font-weight:800}
.gjd .rm{display:block;margin-top:8px;border:0;background:none;font-size:12.5px;color:var(--ink-3,#766A5B);text-decoration:underline;cursor:pointer;padding:0}
.gjd .empty{padding:48px 0;text-align:center;color:var(--ink-2,#5A4E42)}
.gjd .empty b{display:block;font-family:var(--f-display,system-ui);font-stretch:88%;font-weight:800;font-size:24px;text-transform:uppercase;color:var(--ink,#15110D);margin-bottom:8px}
.gjd .empty a{display:inline-flex;margin-top:20px;height:50px;align-items:center;padding:0 24px;border-radius:99px;background:var(--ink,#15110D);color:#fff;font-weight:700}
.gjd .bot{padding:20px 24px calc(20px + env(safe-area-inset-bottom));border-top:1px solid rgba(21,17,13,.1);background:var(--white,#FFFDF9)}
.gjd .sub{display:flex;justify-content:space-between;font-size:17px;font-weight:800}
.gjd .sub small{display:block;font-size:14px;font-weight:500;color:var(--ink-3,#766A5B);margin-top:2px}
.gjd .gjco{width:100%;height:56px;margin-top:16px;border-radius:99px;border:0;background:var(--ink,#15110D);color:#fff;font-weight:800;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px}
.gjd .gjco svg{width:16px;height:16px}
.gjd .msg{margin-top:10px;font-size:14px;color:var(--ink-2,#5A4E42);text-align:center;min-height:1em}

/* ===== add-to-cart motion ===== */
.gj-fly{position:fixed;z-index:400;pointer-events:none;will-change:transform}
.gj-fly img{width:100%;height:100%;object-fit:contain;will-change:transform,opacity;filter:drop-shadow(0 14px 22px rgba(21,17,13,.28))}
.btn.gj-added::after{content:attr(data-added);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:inherit;background:#1F7A45;color:#fff;font-weight:800;z-index:3;animation:gjAdded 1.7s cubic-bezier(.22,.8,.2,1) both}
@keyframes gjAdded{0%{clip-path:circle(0% at 50% 50%)}18%{clip-path:circle(75% at 50% 50%)}82%{clip-path:circle(75% at 50% 50%);opacity:1}100%{clip-path:circle(75% at 50% 50%);opacity:0}}
#cartBtn{position:relative}
#cartBtn.ping::before{content:"";position:absolute;inset:-2px;border-radius:99px;box-shadow:0 0 0 0 rgba(200,30,40,.55);animation:gjPing .9s ease-out;pointer-events:none}
@keyframes gjPing{to{box-shadow:0 0 0 14px rgba(200,30,40,0)}}
#cartBtn.bump .n{animation:gjBump .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes gjBump{0%{transform:scale(1)}35%{transform:scale(1.45)}100%{transform:scale(1)}}
.gjd .it.new{animation:gjNew 1.4s ease both}
@keyframes gjNew{0%{background:rgba(239,184,71,.0);transform:translateX(24px);opacity:0}25%{background:rgba(239,184,71,.22);transform:none;opacity:1}100%{background:rgba(239,184,71,0)}}
@media (prefers-reduced-motion:reduce){.btn.gj-added::after,.gjd .it.new,#cartBtn.ping::before{animation-duration:.01s}}

/* ===== UI kit: AJAX states ===== */
.btn,.notify button,.join button,.signup form button,.gjd .q button,.cp-it .q button,.gjd .rm,.cp-it .rm,.gjco{position:relative}
.is-busy{pointer-events:none}
.is-busy{color:transparent!important}
.is-busy>:not(.gj-spin){opacity:0;transition:opacity .15s}
.is-busy[disabled]{opacity:1!important}
.gj-spin{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2.5px solid var(--spc,currentColor);border-right-color:transparent;opacity:.9;animation:gjSpin .7s linear infinite}
@keyframes gjSpin{to{transform:rotate(360deg)}}
.gjd .it,.cp-it{transition:opacity .25s}
.gjd .it.is-busy,.cp-it.is-busy{opacity:.55;color:inherit!important}
.gjd .it.is-busy>*,.cp-it.is-busy>*{opacity:1}
.gjd .it.is-busy>.gj-spin,.cp-it.is-busy>.gj-spin{display:none}
.tick{animation:gjTick .6s ease}
@keyframes gjTick{0%{color:inherit}30%{color:#1F7A45;transform:translateY(-1px)}100%{color:inherit}}
.pop{display:inline-block;animation:gjPop .42s cubic-bezier(.3,1.7,.5,1)}
@keyframes gjPop{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}
.gj-shake{animation:gjShake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes gjShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
[aria-invalid=true]{box-shadow:inset 0 0 0 1.5px #C8262E!important;border-radius:inherit}
.gj-ferr{margin:10px 0 0;font-size:13.5px;font-weight:600;color:#C8262E;opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s}
.gj-ferr.in{opacity:1;transform:none}
.ftr .gj-ferr,.signup .gj-ferr{color:#FF8A8F}
.gj-success{display:flex;align-items:center;gap:14px;padding:12px 18px;border-radius:20px;background:rgba(31,122,69,.08);color:#1F5E3A;font-weight:700;opacity:0;transform:translateY(8px) scale(.98);transition:opacity .45s cubic-bezier(.22,.8,.2,1),transform .45s cubic-bezier(.22,.8,.2,1);outline:none}
.gj-success.in{opacity:1;transform:none}
.gj-success p{margin:0;line-height:1.4}
.ftr .gj-success,.signup .gj-success,.w-gv .gj-success{background:rgba(255,255,255,.1);color:#fff}
.gj-check{flex:none;width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.gj-check circle{stroke-dasharray:150;stroke-dashoffset:150;opacity:.45}
.gj-check path{stroke-dasharray:40;stroke-dashoffset:40}
.gj-success.in .gj-check circle{animation:gjDraw .6s .1s ease-out forwards}
.gj-success.in .gj-check path{animation:gjDraw .35s .55s ease-out forwards}
@keyframes gjDraw{to{stroke-dashoffset:0}}
.gj-toasts{position:fixed;z-index:500;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;width:max-content;max-width:calc(100vw - 32px)}
.gj-toast{display:flex;align-items:center;gap:10px;padding:12px 18px 12px 12px;border-radius:99px;background:#15110D;color:#fff;font-weight:600;font-size:14.5px;box-shadow:0 18px 40px -16px rgba(0,0,0,.5);opacity:0;transform:translateY(16px) scale(.96);transition:opacity .35s,transform .45s cubic-bezier(.3,1.4,.5,1)}
.gj-toast.in{opacity:1;transform:none}
.gj-toast.out{opacity:0;transform:translateY(8px) scale(.98)}
.gj-toast .ti{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#1F7A45;font-size:14px;font-weight:900}
.gj-toast.err .ti{background:#C8262E}
.has-satc .gj-toasts{bottom:calc(96px + env(safe-area-inset-bottom))}
@media (prefers-reduced-motion:reduce){.gj-spin{animation-duration:1.4s}.gj-shake,.pop,.tick{animation:none}.gj-success,.gj-toast{transition:none}}

/* oil drop (homepage chapter + PDP) */
.oil-drop{position:absolute;left:20%;top:12%;width:22px;height:70%;pointer-events:none;z-index:3}
.oil-drop i{position:absolute;left:0;top:0;width:18px;height:24px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 35% 30%,#FFE9C7 0 12%,#E9A456 30%,#A85B17 75%,#6E3509);box-shadow:0 6px 14px -4px rgba(110,53,9,.6);transform-origin:50% 0;animation:oilDrop 5.5s cubic-bezier(.55,0,.8,.4) infinite}
.oil-drop b{position:absolute;left:-26px;bottom:0;width:70px;height:14px;border-radius:50%;border:2px solid rgba(168,91,23,.45);opacity:0;animation:oilRipple 5.5s ease-out infinite}
@keyframes oilDrop{0%{top:0;transform:scale(.2,.1);opacity:0}12%{top:0;opacity:1;transform:scale(.7,.7)}38%{top:0;transform:scale(1,1.15)}44%{top:6px;transform:scale(.9,1.2)}74%{top:calc(100% - 22px);transform:scale(.85,1.25);opacity:1}76%{top:calc(100% - 22px);opacity:0}100%{top:calc(100% - 22px);opacity:0}}
@keyframes oilRipple{0%,74%{opacity:0;transform:scale(.3)}78%{opacity:1}100%{opacity:0;transform:scale(1.4)}}
@media (prefers-reduced-motion:reduce){.oil-drop{display:none}}
.pdp-rating{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:15px}
.pdp-rating .stars{--r:0%;width:92px;height:16px;background:linear-gradient(90deg,#E7A321 var(--r),rgba(21,17,13,.18) var(--r));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22'%3E%3Cg%3E%3Cpath d='M11 1l3 6.6 7.2.8-5.4 4.9 1.5 7.1L11 16.8 4.7 20.4l1.5-7.1L.8 8.4 8 7.6z'/%3E%3Cpath transform='translate(24.5)' d='M11 1l3 6.6 7.2.8-5.4 4.9 1.5 7.1L11 16.8 4.7 20.4l1.5-7.1L.8 8.4 8 7.6z'/%3E%3Cpath transform='translate(49)' d='M11 1l3 6.6 7.2.8-5.4 4.9 1.5 7.1L11 16.8 4.7 20.4l1.5-7.1L.8 8.4 8 7.6z'/%3E%3Cpath transform='translate(73.5)' d='M11 1l3 6.6 7.2.8-5.4 4.9 1.5 7.1L11 16.8 4.7 20.4l1.5-7.1L.8 8.4 8 7.6z'/%3E%3Cpath transform='translate(98)' d='M11 1l3 6.6 7.2.8-5.4 4.9 1.5 7.1L11 16.8 4.7 20.4l1.5-7.1L.8 8.4 8 7.6z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22'%3E%3Cg%3E%3Cpath d='M11 1l3 6.6 7.2.8-5.4 4.9 1.5 7.1L11 16.8 4.7 20.4l1.5-7.1L.8 8.4 8 7.6z'/%3E%3Cpath transform='translate(24.5)' d='M11 1l3 6.6 7.2.8-5.4 4.9 1.5 7.1L11 16.8 4.7 20.4l1.5-7.1L.8 8.4 8 7.6z'/%3E%3Cpath transform='translate(49)' d='M11 1l3 6.6 7.2.8-5.4 4.9 1.5 7.1L11 16.8 4.7 20.4l1.5-7.1L.8 8.4 8 7.6z'/%3E%3Cpath transform='translate(73.5)' d='M11 1l3 6.6 7.2.8-5.4 4.9 1.5 7.1L11 16.8 4.7 20.4l1.5-7.1L.8 8.4 8 7.6z'/%3E%3Cpath transform='translate(98)' d='M11 1l3 6.6 7.2.8-5.4 4.9 1.5 7.1L11 16.8 4.7 20.4l1.5-7.1L.8 8.4 8 7.6z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain}
.pdp-rating small{color:var(--ink-3,#766A5B)}
.pdp-app{margin-top:10px}
.cp-note textarea.saved{animation:gjSaved 1s ease}
@keyframes gjSaved{30%{box-shadow:inset 0 0 0 1.5px #1F7A45}}
.errors{color:#C8262E;font-size:15px;font-weight:600}
.errors ul{margin:0;padding-left:18px}