/* ═══ WF Checkout UI v3 — All component styles ═══ */
/* Mobile-first: base = mobile, @media (min-width: 768px) = desktop */

#wf-checkout-overlay *{box-sizing:border-box}
#wf-checkout-overlay{direction:rtl;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;color:#1a1a1a;max-width:640px;margin:0 auto;padding:0 8px}

/* ═══ SECTIONS ═══ */
.wf-sec{margin-bottom:20px;margin-top:20px}
.wf-sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:6px}
.wf-sec-t{font-size:18px;font-weight:600;color:#333}
.wf-sec-link{font-size:13px;color:#ab92bf;text-decoration:none;font-weight:500}
.wf-sec-link:hover{text-decoration:underline}
.wf-sec-sub{font-size:12px;color:#707070;margin-bottom:14px}
.wf-dp-note{font-size:12px;color:#707070;margin-bottom:14px;line-height:1.5}
.wf-divider{border:none;border-top:1px solid #e1e1e1;margin:32px 0}

/* ═══ SHOPIFY RADIO CARDS — side by side ═══ */
.Y7uy4{display:grid;grid-template-columns:1fr 1fr;border:1px solid #d9d9d9;border-radius:9px;overflow:hidden}
._1u2aa6m{display:flex;align-items:center;padding:13px 14px;cursor:pointer;transition:background 0.1s;gap:11px;background:#fff}
._1u2aa6m:first-child{border-left:1px solid #d9d9d9}
._1u2aa6m:hover{background:#fafafa}
._1u2aa6m.sel{background:#f3f0ff;border-color:#d9d9d9}
/* Radio dot */
._6hzjvo{width:18px;height:18px;border-radius:50%;border:2px solid #8a8a8a;flex-shrink:0;position:relative;transition:border-color 0.15s}
._1u2aa6m.sel ._6hzjvo{border-color:#ab92bf}
._1u2aa6m.sel ._6hzjvo::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:#ab92bf}
/* Icon */
.kMn77{display:flex;align-items:center;gap:8px}
.kMn77 svg{width:18px;height:18px;min-width:18px;stroke:#545454;stroke-width:1.5;fill:none;overflow:visible}
._1u2aa6m.sel .kMn77 svg{stroke:#ab92bf}
.kMn77 strong{font-size:14px;font-weight:600;color:#303030}

/* ═══ FIELDS — label as placeholder ═══ */
._7ozb2u{position:relative;border:1px solid #d9d9d9;border-radius:5px;background:#fff;transition:border-color 0.1s}
._7ozb2u:focus-within{border-color:#ab92bf;box-shadow:0 0 0 1px #ab92bf}
._7ozb2u input,._7ozb2u select,._7ozb2u textarea{width:100%;padding:13px 11px;border:none;outline:none;font-size:14px;font-family:inherit;background:transparent;color:#1a1a1a;direction:rtl;border-radius:5px}
/* The rest of what a form control needs, so none of it is left to the theme.
   Astra writes bare `input`, `select` and `textarea`, and these five are what
   it was still supplying here — normalize, not design. The values match what
   it gives today, so the fields look exactly as they do now; what changes is
   who owns them, which is what makes the eventual theme swap a non-event.
   line-height is per element on purpose: Astra gives select 1 and the others
   normal, and flattening the two would move the text inside the select. */
._7ozb2u input,._7ozb2u textarea{margin:0;line-height:normal}
._7ozb2u select{margin:0;line-height:1}
._7ozb2u input,._7ozb2u select,._7ozb2u textarea{text-transform:none;vertical-align:baseline;box-shadow:none}
._7ozb2u input:focus,._7ozb2u select:focus,._7ozb2u textarea:focus{box-shadow:none;background:transparent;color:#1a1a1a}
._7ozb2u select{appearance:none;-webkit-appearance:none;cursor:pointer}
._7ozb2u label{position:absolute;top:50%;right:11px;transform:translateY(-50%);font-size:14px;color:#707070;pointer-events:none;transition:opacity 0.1s}
._7ozb2u input:focus+label,._7ozb2u input:not(:placeholder-shown)+label,._7ozb2u select:valid+label,._7ozb2u select.has-val+label{opacity:0}
._7ozb2u textarea:focus+label,._7ozb2u textarea:not(:placeholder-shown)+label{opacity:0}
._7ozb2u textarea{height:80px;resize:none}
/* Select arrow */
._7ozb2u .sel-arrow{position:absolute;left:11px;top:50%;transform:translateY(-50%);pointer-events:none;color:#707070}
._7ozb2u .sel-arrow svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}

/* Field grid */
._1mrl{display:grid;gap:10px;margin-bottom:10px}
._1mrl.c2{grid-template-columns:1fr 1fr}
._1mrl.c3{grid-template-columns:1fr 1fr 1fr}
._1mrl.c21{grid-template-columns:1fr}

/* ═══ PICKUP LOCATION CARDS ═══ */
.wf-pickup-loc{padding:14px 16px;border:1px solid #e1e1e1;border-radius:9px;margin-bottom:8px;cursor:pointer;transition:all 0.15s;display:flex;align-items:flex-start;gap:12px}
.wf-pickup-loc:hover{border-color:#d4c4e3;background:#faf8fc}
.wf-pickup-loc.selected{border-color:#ab92bf;background:#f3f0ff}
.wf-pickup-loc .wf-pl-radio{width:18px;height:18px;border-radius:50%;border:2px solid #8a8a8a;flex-shrink:0;position:relative;margin-top:2px;transition:border-color 0.15s}
.wf-pickup-loc.selected .wf-pl-radio{border-color:#ab92bf}
.wf-pickup-loc.selected .wf-pl-radio::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:#ab92bf}
.wf-pickup-loc .wf-pl-info{flex:1}
.wf-pickup-loc .wf-pl-name{font-size:14px;font-weight:600;color:#333;margin-bottom:2px}
.wf-pickup-loc .wf-pl-addr{font-size:13px;color:#666;margin-bottom:2px}
.wf-pickup-loc .wf-pl-hours{font-size:11px;color:#999}
.wf-pickup-loc .wf-pl-notes{font-size:11px;color:#ab92bf;margin-top:3px}

.gift-note{font-size:12px;color:#967aad;background:#f6f2f9;padding:10px 14px;border-radius:8px;margin-bottom:14px}

/* ═══ CALENDAR ═══ */
#wf-cal{margin-bottom:8px}
.wf-cal-days{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:4px;direction:rtl}
.wf-cal-days span{font-size:11px;font-weight:600;color:#999;padding:4px 0}
.wf-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;direction:rtl}
.wf-cal-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.1s;position:relative;color:#333}
.wf-cal-cell:hover{background:#e8e0f5}
.wf-cal-cell.wf-cal--empty{cursor:default}
.wf-cal-cell.wf-cal--past{color:#d0d0d0;cursor:default;pointer-events:none}
.wf-cal-cell.wf-cal--off{color:#bbb;cursor:default;pointer-events:none;background:#f0f0f0}
.wf-cal-cell.wf-cal--ok,.wf-cal-cell.wf-cal--few{background:#f3f0ff;color:#5c3d7a}
.wf-cal-cell.wf-cal--ok:hover,.wf-cal-cell.wf-cal--few:hover{background:#e8e0f5}
.wf-cal-cell.wf-cal--full{background:#f0f0f0;color:#bbb;cursor:default;pointer-events:none}
.wf-cal-cell.wf-cal--sel{background:#5c3d7a!important;color:#fff!important;box-shadow:0 2px 6px rgba(92,61,122,0.25)}
.wf-cal-cell.wf-cal--today{font-weight:800} /* current-day marker (purple border) removed per request; selection = wf-cal--sel */
#wf-cal-more{display:block;text-align:center;font-size:12px;color:#ab92bf;margin-top:8px;cursor:pointer;text-decoration:none;font-weight:500}
#wf-cal-more:hover{text-decoration:underline}

/* ═══ SLOTS ═══ */
.slot-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.sl{padding:13px 6px;border:1px solid #d9d9d9;border-radius:7px;text-align:center;cursor:pointer;background:#fff;transition:all 0.1s}
.sl:hover{border-color:#ab92bf}
.sl.sel{border-color:#5c3d7a;background:#5c3d7a}
.sl.sel *{color:#fff !important}
.sl-name{font-size:15px;font-weight:700;color:#303030}
.sl-time{font-size:12px;color:#666;margin-top:3px}
.sl-warn{font-size:10px;color:#d32f2f;margin-top:4px;font-weight:500}

/* A window that exists but cannot be booked. Same visual language as a full
   day in the calendar (.wf-cal--full) so "unavailable" reads the same way in
   both places. pointer-events kills hover and click together, but the JS also
   scopes its click handler and its auto-select — CSS alone is a look, not a
   guarantee. */
.sl.is-off{background:#f0f0f0;border-color:#e5e5e5;cursor:default;pointer-events:none}
/* !important because the JS writes the time colour as an inline style, the
   same reason .sl.sel already needs it two rules up. */
.sl.is-off .sl-time{color:#b0b0b0 !important}
/* The cart picker draws .sl-name instead of an inline-styled .sl-time. */
.sl.is-off .sl-name{color:#b0b0b0}
.sl-tag{
  display:inline-block;margin-top:4px;
  padding:1px 8px;border-radius:999px;
  font-size:10px;font-weight:600;line-height:1.6;
  color:#8a8a8a;background:#e2e2e2
}

/* ═══ DATE ROW (legacy — kept for cart banner) ═══ */
.date-row{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px}
.date-row::-webkit-scrollbar{display:none}
.date-nav{display:flex;gap:10px;margin-top:8px;direction:ltr}
.date-scroll{width:28px!important;height:28px!important;min-width:28px!important;max-width:28px!important;border-radius:50%!important;background:#f3f0ff!important;border:none!important;cursor:pointer!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;transition:background 0.15s!important;padding:0!important;margin:0!important;box-shadow:none!important;text-transform:none!important;line-height:1!important}
.date-scroll:hover{background:#e8e0f5!important}
.date-scroll svg{width:12px;height:12px;stroke:#ab92bf;stroke-width:2.5;fill:none}

/* ═══ PAY BUTTON ═══ */
.pay-btn{width:100%;padding:14px;background:#303030;color:#fff;border:none;border-radius:9px;font-size:15px;font-weight:600;cursor:pointer;transition:background 0.15s;font-family:inherit;margin-top:8px}
/* Same containment as the other controls. The label here is already white, so
   Astra's button:hover{color:#fff} never showed — but it is one customiser
   change away from mattering on the one button that has to work. */
.pay-btn{margin-right:0;margin-bottom:0;margin-left:0;line-height:normal;text-transform:none;vertical-align:baseline;-webkit-appearance:none;appearance:none}
.pay-btn:hover{background:#1a1a1a;color:#fff;border-color:transparent}
.pay-btn:focus{color:#fff;border-color:transparent}
.pay-btn:disabled{background:#999;cursor:not-allowed}

/* ═══ CHECKBOXES ═══ */
.chk{display:flex;align-items:center;gap:8px;font-size:13px;color:#545454;margin:10px 0;cursor:pointer}
.chk input{width:16px;height:16px;accent-color:#ab92bf;border-radius:3px}
.chk a{color:#ab92bf}

.nl{font-size:12px;color:#ab92bf;cursor:pointer;font-weight:500;display:inline-block;margin-bottom:8px}
.nl:hover{text-decoration:underline}

/* ═══ CITY MESSAGES ═══ */
.wf-city-ok{padding:8px 12px;border-radius:6px;background:#e9f7ef;color:#1a8a4a;font-size:12px;font-weight:500;margin:8px 0}
.wf-city-no{padding:8px 12px;border-radius:6px;background:#fdeaea;color:#d32f2f;font-size:12px;font-weight:500;margin:8px 0}

/* ═══ DELIVERY DONE STRIP ═══ */
.wf-dp-done{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:6px;font-size:12px;font-weight:500;background:#e9f7ef;color:#1a8a4a;margin-top:10px}
.wf-dp-done a{color:#967aad;text-decoration:none;margin-right:auto;font-size:11px}
.wf-dp-done a:hover{text-decoration:underline}

/* ═══ SAVED ADDRESS CARDS ═══ */
.wf-addr-card{border:1px solid #e1e1e1;border-radius:8px;padding:10px 14px;margin-bottom:6px;display:flex;align-items:center;justify-content:space-between;transition:all 0.1s}
.wf-addr-card.active{border-color:#ab92bf;background:#f3f0ff}
.wf-addr-card-text{font-size:13px;color:#333;line-height:1.4;flex:1}
.wf-addr-card-sub{font-size:11px;color:#707070;margin-top:2px}
.wf-addr-pick{padding:5px 14px;background:#ab92bf;color:#fff;border:none;border-radius:5px;font-size:12px;font-weight:600;cursor:pointer;flex-shrink:0;font-family:inherit}
.wf-addr-pick:hover{background:#967aad}
.wf-addr-card.active .wf-addr-pick{background:#e0e0e0;color:#666;cursor:default}
.wf-addr-selected{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#f3f0ff;border:1px solid #d4c4e3;border-radius:8px;margin-top:8px}
.wf-addr-selected-text{font-size:13px;color:#5c3d7a;flex:1}
.wf-addr-change{font-size:12px;color:#ab92bf;cursor:pointer;font-weight:500;text-decoration:none;flex-shrink:0}
.wf-addr-change:hover{text-decoration:underline}
.wf-addr-new{font-size:12px;color:#ab92bf;cursor:pointer;margin-top:8px;font-weight:500;display:inline-block}
.wf-addr-new:hover{text-decoration:underline}

/* ═══ GREETING QUICKVIEW MODAL ═══ */
.wf-qv-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.75);z-index:99999;align-items:flex-start;justify-content:center;padding:60px 12px 20px;overflow-y:auto}
.wf-qv-overlay.open{display:flex}
.wf-qv-close{position:fixed;top:16px;left:16px;width:40px!important;height:40px!important;min-width:40px!important;border-radius:50%!important;background:#fff!important;border:none!important;cursor:pointer!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font-size:22px!important;color:#333!important;z-index:100000;box-shadow:0 2px 10px rgba(0,0,0,0.4)!important;padding:0!important;margin:0!important;line-height:1!important}
.wf-qv-close:hover{background:#f0f0f0!important}
.wf-qv-cards{display:flex;flex-direction:column;gap:12px;max-width:800px;width:100%}
.wf-qv-card{flex:1;border-radius:12px;overflow:hidden;position:relative;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,0.15)}
.wf-qv-card img{width:100%;height:auto;display:block}
.wf-qv-card-label{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,0.9);padding:4px 14px;border-radius:12px;font-size:12px;color:#666;font-weight:500}
.wf-qv-sticker{position:absolute;top:15%;left:15%;right:15%;bottom:12%;display:flex;align-items:center;justify-content:center;padding:12px;text-align:center;font-size:16px;line-height:1.7;color:#333;direction:rtl;white-space:pre-line;overflow:hidden}
.wf-qv-zoom{position:absolute;top:8px;right:8px;width:34px!important;height:34px!important;min-width:34px!important;border-radius:50%!important;background:#ab92bf!important;border:none!important;cursor:pointer!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;z-index:2;box-shadow:0 2px 6px rgba(0,0,0,0.2)!important;padding:0!important;margin:0!important}
.wf-qv-zoom svg{width:16px;height:16px;stroke:#fff;stroke-width:2.5;fill:none}
.wf-qv-zoom:hover{background:#967aad!important}

/* ═══ COLLAPSED / LOCKED SECTIONS ═══ */
.wf-collapsed-strip{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#f3f0ff;border-radius:8px;margin-bottom:20px;cursor:default}
.wf-strip-content{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:#5c3d7a}
.wf-strip-icon{font-size:16px}
.wf-strip-edit{font-size:12px;color:#967aad;text-decoration:none;font-weight:500;flex-shrink:0}
.wf-strip-edit:hover{text-decoration:underline}

.wf-sec.is-locked{border:1px solid #e8e0f0;border-radius:10px;padding:14px 18px;background:#faf8fc;opacity:0.7;pointer-events:none}
.wf-sec.is-locked .wf-sec-head{margin-bottom:0}
.wf-sec.is-locked .wf-sec-t{color:#b0a0c0;font-size:15px}
.wf-sec.is-locked .wf-sec-body,.wf-sec.is-locked .wf-sec-strip{display:none!important}
.wf-sec.is-locked hr{display:none!important}
.wf-sec.is-locked .wf-sec-edit{display:none!important}

.wf-sec-strip{padding:10px 14px;background:#f3f0ff;border:1px solid #e8e0f0;border-radius:8px;font-size:13px;color:#5c3d7a;line-height:1.5;display:flex;align-items:center;justify-content:space-between;gap:10px}
.wf-sec-strip-text{flex:1;display:flex;align-items:center;gap:6px}
.wf-sec-strip-icon{flex-shrink:0;display:flex;align-items:center}
.wf-sec-strip-icon svg{width:16px;height:16px;stroke:#ab92bf;stroke-width:1.5;fill:none}
.wf-sec.is-collapsed .wf-sec-body{display:none!important}
.wf-sec.is-collapsed .wf-sec-head{margin-bottom:8px}
.wf-sec.is-collapsed .wf-sec-head .wf-sec-edit{display:none!important}

.wf-sec-strip-action{font-size:12px;color:#ab92bf;font-weight:500;text-decoration:none;flex-shrink:0;white-space:nowrap}
.wf-sec-strip-action:hover{text-decoration:underline}

.wf-sec-close{font-size:12px;color:#ab92bf;font-weight:500;text-decoration:none;margin-right:auto;margin-left:0}
.wf-sec-close:hover{text-decoration:underline}

/* ═══ ERROR DISPLAY ═══ */
.wf-errors{background:#fdeaea;color:#d32f2f;padding:12px 16px;border-radius:8px;font-size:13px;margin-bottom:16px;display:none}
.wf-errors ul{margin:0;padding:0 16px;list-style:disc}
.wf-errors li{margin-bottom:4px}

._7ozb2u.wf-err{border-color:#d32f2f!important;box-shadow:0 0 0 1px #d32f2f!important}
.wf-field-err{font-size:11px;color:#d32f2f;margin-top:3px;display:none}
._7ozb2u.wf-err+.wf-field-err{display:block}
.wf-terms-err{display:none;font-size:12px;color:#d32f2f;font-weight:500;margin-top:4px}
.chk.wf-chk-err{color:#d32f2f}
.chk.wf-chk-err input{outline:2px solid #d32f2f;outline-offset:2px}

/* ═══ LOADING ═══ */
.wf-loading{text-align:center;padding:20px;color:#999;font-size:13px}

/* ═══ GREETING CARDS ═══ */
.wf-greeting-cards{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.wf-greeting-cards::-webkit-scrollbar{display:none}
.wf-greeting-card{min-width:80px;padding:10px 8px;border:1px solid #d9d9d9;border-radius:8px;text-align:center;cursor:pointer;background:#fff;transition:all 0.1s;flex-shrink:0}
.wf-greeting-card:hover{border-color:#ab92bf}
.wf-greeting-card.selected{border-color:#ab92bf;background:#f3f0ff}
.wf-greeting-card-img{font-size:28px;margin-bottom:4px;line-height:1}
.wf-greeting-card-img img{width:60px;height:60px;object-fit:cover;border-radius:6px}
.wf-greeting-card-name{font-size:11px;font-weight:600;color:#333}
.wf-greeting-card-price{font-size:10px;color:#ab92bf;margin-top:2px}

/* Greeting filter mode toggle */
.wf-gm-btn{flex:1;padding:9px 0;border:1px solid #e1e1e1;background:#fff;font-size:13px;font-weight:600;color:#999;cursor:pointer;transition:all 0.15s;font-family:inherit}
.wf-gm-btn:first-child{border-radius:0 7px 7px 0;border-left:none}
.wf-gm-btn:last-child{border-radius:7px 0 0 7px;border-right:none}
.wf-gm-btn.active{background:#f3f0ff;color:#7b5ea7;border-color:#d4c4e3}

/* Greeting series tabs */
.wf-greeting-series{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid #e8e0f0;padding-bottom:0}
.wf-greeting-series::-webkit-scrollbar{display:none}
.wf-greeting-series .wf-greeting-cat{padding:8px 16px;border:none;border-radius:0;font-size:13px;font-weight:600;cursor:pointer;background:none;white-space:nowrap;transition:all 0.15s;color:#999;border-bottom:2px solid transparent;margin-bottom:-1px}
.wf-greeting-series .wf-greeting-cat:hover{color:#7b5ea7}
.wf-greeting-series .wf-greeting-cat.selected{background:none;color:#7b5ea7;border-bottom-color:#ab92bf}

/* Greeting category tags */
.wf-greeting-cats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.wf-greeting-cats::-webkit-scrollbar{display:none}
.wf-greeting-cat{padding:4px 12px;border:1px solid #e1e1e1;border-radius:12px;font-size:11px;font-weight:500;cursor:pointer;background:#fafafa;white-space:nowrap;transition:all 0.1s;color:#707070}
.wf-greeting-cat:hover{border-color:#d4c4e3;color:#7b5ea7}
.wf-greeting-cat.selected{background:#f3f0ff;color:#7b5ea7;border-color:#d4c4e3}
.wf-series-badge{display:inline-block;background:#d32f2f;color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:8px;margin-right:4px;vertical-align:middle;line-height:1.3}

/* City autocomplete dropdown */
#wf-city-dropdown .wf-city-item{padding:10px 14px;cursor:pointer;font-size:14px;color:#1a1a1a;border-bottom:1px solid #f0f0f0}
#wf-city-dropdown .wf-city-item:last-child{border-bottom:none}
#wf-city-dropdown .wf-city-item:hover,#wf-city-dropdown .wf-city-item.active{background:#f3f0ff}
#wf-city-dropdown .wf-city-empty{padding:12px 14px;color:#999;font-size:13px;text-align:center}

/* Greeting section — collapsible with grey bg */
.wf-greeting-wrap{background:#f5f5f5;border-radius:12px;padding:16px 20px;cursor:pointer}
.wf-greeting-wrap.open{cursor:default}
.wf-greeting-header{display:flex;align-items:center;gap:20px}
.wf-greeting-header .wf-sec-t{font-size:15px;color:#333;margin:0}
.wf-greeting-arrow{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:#ab92bf;border-radius:50%;animation:wf-arrow-pulse 1.5s ease-in-out infinite;flex-shrink:0}
.wf-greeting-arrow svg{width:14px;height:14px;stroke:#fff;stroke-width:2.5;fill:none}
.wf-greeting-wrap.open .wf-greeting-arrow{animation:none;background:#d4c4e3;transform:rotate(90deg)}
@keyframes wf-arrow-pulse{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}

/* ═══ SUBSCRIPTION DAY PICKER ═══ */
.wf-sub-days{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.wf-sub-day-btn{padding:16px 8px;border:2px solid #d9d9d9;border-radius:10px;text-align:center;cursor:pointer;background:#fff;transition:all 0.15s}
.wf-sub-day-btn:hover:not(.wf-sub-day--disabled):not(.wf-sub-day--selected){border-color:#303030;background:#fafafa}
.wf-sub-day-btn.wf-sub-day--selected,.wf-sub-day-btn.wf-sub-day--selected:hover{border-color:#303030;background:#303030;color:#fff}
.wf-sub-day-btn.wf-sub-day--selected .wf-sub-day-name,.wf-sub-day-btn.wf-sub-day--selected .wf-sub-day-date{color:#fff!important}
/* next-week red border marker removed per request — these days look like any other;
   selection still uses wf-sub-day--selected (filled). */
.wf-sub-day-btn.wf-sub-day--disabled{border-color:#e1e1e1;background:#f5f5f5;color:#bbb;cursor:not-allowed;pointer-events:none}
.wf-sub-day-btn.wf-sub-day--disabled .wf-sub-day-name,.wf-sub-day-btn.wf-sub-day--disabled .wf-sub-day-date{color:#bbb!important}
.wf-sub-day-name{font-size:15px;font-weight:700;color:#303030;margin-bottom:4px}
.wf-sub-day-date{font-size:12px;color:#666}
.wf-sub-day-date:empty{display:none}
.wf-sub-next-week-warn{font-size:11px;color:#d32f2f;margin-bottom:8px}
.wf-sub-first-delivery{font-size:13px;color:#1a8a4a;margin-bottom:8px;padding:8px 12px;background:#e9f7ef;border-radius:6px}
/* ═══ SUBSCRIPTION GIFT FIRST DATE ═══ */
.wf-sub-gift-date-label{display:flex;align-items:flex-start;gap:8px;cursor:pointer;padding:12px 14px;border:1px solid #d9d9d9;border-radius:8px;background:#fafafa;font-size:13px;color:#333;line-height:1.5;transition:all 0.15s}
.wf-sub-gift-date-label:hover{border-color:#ab92bf;background:#f9f6fc}
.wf-sub-gift-date-label input[type="checkbox"]{margin-top:3px;accent-color:#ab92bf;flex-shrink:0}
#wf-sub-cal .wf-cal-days,#wf-sub-cal .wf-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}
#wf-sub-cal .wf-cal-days span{font-size:11px;color:#999;padding:4px 0}

/* ═══ COUPON (FK forms: sidebar mini-cart + embed summary) ═══ */
/* field + button share one row; every message renders full-width below both */
.wfacp_woocommerce_form_coupon .wfacp_coupon_row,
.wfacp_woocommerce_form_coupon .wfacp_coupon_field_box{display:flex;align-items:flex-end;gap:8px}
.wfacp_woocommerce_form_coupon .wfacp_coupon_row p.form-row,
.wfacp_woocommerce_form_coupon .wfacp_coupon_field_box p.form-row{float:none;width:auto;margin:0;padding:0}
.wfacp_woocommerce_form_coupon .wfacp_coupon_row p.form-row-first,
.wfacp_woocommerce_form_coupon .wfacp_coupon_field_box p.form-row-first{flex:1;min-width:0}
.wfacp_woocommerce_form_coupon .wfacp_coupon_row p.form-row-last,
.wfacp_woocommerce_form_coupon .wfacp_coupon_field_box p.form-row-last{flex:none}
.wfacp_woocommerce_form_coupon .wfacp_coupon_row p.form-row-last label,
.wfacp_woocommerce_form_coupon .wfacp_coupon_field_box p.form-row-last label{display:none}
.wfacp_woocommerce_form_coupon .wfacp_coupon_row .clear,
.wfacp_woocommerce_form_coupon .wfacp_coupon_field_box .clear{display:none}
.wfacp_woocommerce_form_coupon input.wfacp_coupon_field_input{height:44px;box-sizing:border-box}
.wfacp_woocommerce_form_coupon button.wfacp-coupon-btn,
.wfacp_woocommerce_form_coupon button.wfacp-coupon-field-btn{
  height:44px;padding:0 22px;background:#303030;color:#fff;border:none;border-radius:8px;
  font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s;white-space:nowrap}
.wfacp_woocommerce_form_coupon button.wfacp-coupon-btn:hover:not(:disabled),
.wfacp_woocommerce_form_coupon button.wfacp-coupon-field-btn:hover:not(:disabled){background:#4a4a4a}
.wfacp_woocommerce_form_coupon button.wfacp-coupon-btn:disabled,
.wfacp_woocommerce_form_coupon button.wfacp-coupon-field-btn:disabled{background:#e1e1e1;color:#999;cursor:not-allowed}
/* FK lays the form out as flex-row → the message row lands BESIDE the field.
 * Column layout keeps rows stacked: fields first, messages under them. */
.wfacp_woocommerce_form_coupon form.checkout_coupon{display:flex;flex-direction:column;width:100%}
.wfacp_woocommerce_form_coupon form.checkout_coupon > .wfacp-row{width:100%}
/* WC injects its notice above the form — flex order pushes it visually below */
.wfacp_woocommerce_form_coupon .wfacp_mini_cart_classes{display:flex;flex-direction:column}
.wfacp_woocommerce_form_coupon .wfacp_mini_cart_classes > form{order:1}
.wfacp_woocommerce_form_coupon .wfacp_mini_cart_classes > .woocommerce-message,
.wfacp_woocommerce_form_coupon .wfacp_mini_cart_classes > .woocommerce-error{order:2}
/* FK/WC message containers go dark — wf-checkout-summary harvests their
 * content into a single .wf-coupon-feedback chip (empty containers painted
 * ghost bars, and stale messages piled above fresh ones) */
.wfacp_woocommerce_form_coupon .wfacp_coupon_msg,
.wfacp_woocommerce_form_coupon .wfacp_coupon_notices,
.wfacp_woocommerce_form_coupon .wfacp_coupon_remove_msg,
.wfacp_woocommerce_form_coupon .wfacp_coupon_field_msg,
.wfacp_woocommerce_form_coupon .wfacp_coupon_error_msg,
.wfacp_woocommerce_form_coupon .woocommerce-message,
.wfacp_woocommerce_form_coupon .woocommerce-error{display:none !important}
.wfacp_woocommerce_form_coupon .woocommerce-form-coupon-toggle .woocommerce-info{display:block}
/* the one feedback chip: success green, failure red — full width under the row */
.wf-coupon-feedback{display:block;border:0;padding:10px 14px;border-radius:8px;
  font-size:13px;line-height:1.5;margin:8px 0 0;clear:both;width:auto}
.wf-coupon-feedback[data-kind="ok"]{background:#e9f7ef;color:#1a8a4a}
.wf-coupon-feedback[data-kind="err"]{background:#fdecea;color:#c0392b}

/* ═══ DESKTOP OVERRIDES ═══ */
@media (min-width: 768px) {
  #wf-checkout-overlay{padding:0}
  ._1mrl.c21{grid-template-columns:2fr 1fr}
  .slot-grid{grid-template-columns:repeat(3,1fr)}
  .wf-qv-cards{flex-direction:row;gap:16px}
  .wf-qv-overlay{padding:40px 20px}
}

/* ═══ CHECKOUT OFFERS — rule-driven add-ons ═══════════════════════════
   One card anatomy for all three layouts: thumbnail, text, control in a
   row. The layout rule changes how the cards are arranged, never what a
   card is. One offer gets a roomier card, two stack, three or more swipe.

   ROUND-CONTROL GUARD applies to .wf-off__arrow: fixed size, flex:none,
   border-box, and ONE horizontal inset. FunnelKit and Astra both set
   opposing insets on buttons inside the checkout, and left+right+auto
   stretches a circle the width of its parent. */

.wf-off-wrap{display:block}
.wf-off{margin-top:24px;margin-bottom:24px}
.wf-off .wf-sec-head{margin-bottom:12px}


/* ── the track ───────────────────────────────────────────────────── */
.wf-off__track{display:grid;gap:10px}

/* one offer — a single full-width card, no carriage of any kind */
.wf-off.is-single .wf-off__track{grid-template-columns:1fr}

/* two offers — stacked. Side by side reads as a carousel that broke. */
.wf-off.is-rows .wf-off__track{grid-template-columns:1fr}

/* three or more — swipe. 75% leaves a quarter of the next card showing:
   a card cut by the edge is what tells the customer there is another one,
   and a card that ends flush with the edge reads as the last. */
.wf-off.is-carousel .wf-off__track{
  grid-auto-flow:column;grid-auto-columns:75%;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:2px
}
.wf-off.is-carousel .wf-off__track::-webkit-scrollbar{display:none}
.wf-off.is-carousel .wf-off__card{scroll-snap-align:start}

/* ── the arrows ──────────────────────────────────────────────────────
   Same language as the carousels on the rest of the site (.wf-pc__arrow):
   a soft-lavender circle, the back arrow flipped rather than drawn twice,
   30% opacity at the end of the track. Smaller than the 46px used on the
   home page — this header carries an 18px title in a narrow column, and a
   46px circle there reads as the loudest thing in the block.

   The checkout palette has no --wfc-* variables, so the values are literal:
   #F3F0FF surface, #5E3D7E deep, #AB92BF soft. */
.wf-off .wf-sec-head{align-items:center}
.wf-off__arrows{display:none;gap:8px;flex:none}
.wf-off__arrow{
  flex:none;box-sizing:border-box;
  width:36px;height:36px;min-width:36px;min-height:36px;max-width:36px;max-height:36px;
  right:auto;                       /* one inset only — see guard above */
  display:flex;align-items:center;justify-content:center;
  padding:0;margin:0;border:1px solid #d4c4e3;border-radius:50%;
  background:#F3F0FF;color:#5E3D7E;cursor:pointer;
  font:inherit;line-height:normal;-webkit-appearance:none;appearance:none;
  transition:background .15s,border-color .15s
}
.wf-off__arrow:hover{background:#ece6fb;border-color:#AB92BF}
.wf-off__arrow:disabled{opacity:.3;cursor:default}
.wf-off__arrow svg{display:block;width:18px;height:18px;flex:none}
.wf-off__arrow--prev svg{transform:scaleX(-1)}   /* points back — right, in RTL */

/* ── the card ────────────────────────────────────────────────────── */
.wf-off__card{
  position:relative;box-sizing:border-box;
  display:flex;align-items:center;gap:11px;
  min-height:76px;padding:10px 12px;
  border:1px solid #d9d9d9;border-radius:9px;background:#fff;
  transition:border-color .12s,background .12s
}
.wf-off__card:hover{border-color:#c4c4c4}
.wf-off__card.is-in{background:#f8f6fc;border-color:#ab92bf}

.wf-off__img{flex:none;width:56px;height:56px;border-radius:6px;overflow:hidden;background:#f4f4f4}
.wf-off__img img{width:100%;height:100%;object-fit:cover;display:block}

.wf-off__text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.wf-off__name{font-size:14px;font-weight:600;color:#303030;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.wf-off__intro{font-size:12px;color:#707070;line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.wf-off__price{font-size:13px;color:#303030;display:flex;align-items:baseline;gap:6px;margin-top:1px}
.wf-off__price b{font-weight:700}
.wf-off__price s{color:#9a9a9a;font-weight:400;font-size:12px}

/* The variation picker, shown only when the rule left the choice to the
   customer. Sized to the text so it never pushes the add button off the card
   on a narrow phone. */
.wf-off__pick{
  margin:6px 0 0;max-width:100%;width:auto;height:auto;
  padding:4px 26px 4px 8px;
  font-size:12px;font-family:inherit;line-height:1.4;color:#303030;
  background:#fff;border:1px solid #dcdcde;border-radius:6px;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23767676' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 9px center;
}
.wf-off__pick:focus{outline:2px solid #7d6499;outline-offset:1px}

/* ── the control ─────────────────────────────────────────────────── */
.wf-off__btn{
  flex:none;box-sizing:border-box;
  display:flex;align-items:center;gap:5px;
  height:34px;padding:0 12px;
  border:1px solid #ab92bf;border-radius:6px;
  background:#fff;color:#7d6499;
  font-size:13px;font-weight:600;font-family:inherit;
  cursor:pointer;white-space:nowrap;
  /* Astra owns bare <button>: font, margin, line-height and appearance. Stated
     here so nothing is left for it to fill — see the note above :hover. */
  margin:0;line-height:normal;-webkit-appearance:none;appearance:none;
  transition:background .12s,color .12s,border-color .12s
}
/* Astra styles a bare <button> and flips its label to white on hover. On our
   pale lavender hover that leaves the word invisible — the button reads as an
   empty box. The colour is stated here instead of left to inherit, and the
   extra .wf-off in the selector is what keeps it ahead of the theme without
   reaching for !important.

   :not() spares the two states that own their colour: .is-in is white on solid
   lavender, .is-error is red. Neither should turn black. */
.wf-off .wf-off__btn:not(.is-in):not(.is-error):hover{background:#f3f0ff;color:#000;border-color:#ab92bf}
.wf-off__btn svg{display:block;flex:none}
.wf-off__btn.is-in{background:#ab92bf;border-color:#ab92bf;color:#fff}
.wf-off__btn.is-in:hover{background:#9a7fb0;border-color:#9a7fb0}
.wf-off__btn.is-busy{opacity:.55;cursor:default}
.wf-off__btn.is-error{border-color:#c0392b;color:#c0392b;background:#fff}
.wf-off__btn:disabled{cursor:default}

/* Inside the card, not hanging off its top edge.
   A negative top escapes the card, and the carousel track clips whatever
   escapes it — overflow-x:auto makes overflow-y a clip whether you asked
   for one or not. The badge was cut in half in exactly the layout it was
   most needed in. Pinned to the far side from the thumbnail, above the
   button, where no layout puts content. */
/* Inline on the name row, not floating over the corner: absolutely
   positioned it landed on top of the control on the single-offer card. */
.wf-off__badge{
  flex:none;
  padding:2px 8px;border-radius:999px;
  background:#ab92bf;color:#fff;
  font-size:10px;font-weight:600;letter-spacing:.02em;white-space:nowrap;
  pointer-events:none
}
.wf-off__head{display:flex;align-items:center;gap:8px;min-width:0}
.wf-off__head .wf-off__name{min-width:0}

/* ── one offer: it gets the whole width, so it should look like an offer
      rather than a row in a list. Bigger image, a price you can read at a
      glance, and a control sized like something you are meant to press. ── */
.wf-off.is-single .wf-off__card{
  gap:16px;min-height:96px;padding:16px 18px;border-radius:11px
}
.wf-off.is-single .wf-off__img{width:76px;height:76px;border-radius:8px}
.wf-off.is-single .wf-off__text{gap:4px}
.wf-off.is-single .wf-off__name{font-size:16px;-webkit-line-clamp:2}
.wf-off.is-single .wf-off__intro{font-size:13px;line-height:1.5}
.wf-off.is-single .wf-off__price{font-size:19px;gap:9px;margin-top:3px}
.wf-off.is-single .wf-off__price s{font-size:14px}
.wf-off.is-single .wf-off__btn{height:42px;padding:0 20px;font-size:14px;border-radius:8px}

@media (max-width:560px){
  /* The control drops under the text rather than squeezing all three across. */
  .wf-off.is-single .wf-off__card{flex-wrap:wrap}
  .wf-off.is-single .wf-off__btn{width:100%;justify-content:center}
}

@media (min-width:768px){
  /* Arrows are a desktop affordance: a touch screen swipes, and the rest of
     the site hides them on mobile for the same reason. */
  .wf-off.is-carousel .wf-off__arrows{display:flex}
  .wf-off__card{min-height:82px;padding:11px 13px}
  .wf-off__img{width:60px;height:60px}
}


@media (prefers-reduced-motion:reduce){
  .wf-off__track{scroll-behavior:auto}
}

/* ── Offers: gated until the payment step opens ──────────────────────
   The block renders server-side before #acc-pay, so it exists from the
   first paint. wf-checkout-offers.js watches that section and sets this
   class while it is locked. Hidden, not removed: it redraws itself after
   every add, and re-rendering into a detached wrapper loses the block. */
.wf-off-wrap.is-gated{display:none}

/* ── Offers: the quick-view magnifier ────────────────────────────────
   Same affordance as .wf-prod-card__qv on the my-delivery cards — white
   circle, top corner of the thumbnail — so a magnifier means the same
   thing wherever it appears.

   ROUND-CONTROL GUARD: fixed box, flex:none, ONE inset. It is absolutely
   positioned inside .wf-off__img, and pinning both insets would stretch
   it across the thumbnail. */
.wf-off__img{position:relative}
.wf-off__qv{
  position:absolute;top:4px;right:4px;left:auto;   /* one inset only */
  flex:none;box-sizing:border-box;
  width:26px;height:26px;min-width:26px;min-height:26px;max-width:26px;max-height:26px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;margin:0;border:1px solid #e6e1da;border-radius:50%;
  background:#fff;color:#3a2e2a;cursor:pointer;z-index:3;
  font:inherit;line-height:normal;-webkit-appearance:none;appearance:none;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  transition:background .12s,color .12s
}
.wf-off__qv:hover{background:#f5f1ea;color:#AB92BF}
.wf-off__qv svg{display:block;width:13px;height:13px;flex:none}

/* ── The quick-view modal ────────────────────────────────────────────
   Shared shell, printed by WF_Quick_View. Styled here because the
   checkout is the first place that calls it; when my-delivery migrates
   off its inline copy these rules move to a shared sheet with it. */
.wf-qv{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(0,0,0,.6)}
.wf-qv[hidden]{display:none}
.wf-qv__panel{position:relative;width:100%;max-width:420px;max-height:90vh;overflow-y:auto;
  background:#fff;border-radius:14px}
.wf-qv__close{
  position:absolute;top:8px;left:8px;right:auto;      /* one inset only */
  flex:none;box-sizing:border-box;
  width:32px;height:32px;min-width:32px;min-height:32px;max-width:32px;max-height:32px;
  display:flex;align-items:center;justify-content:center;
  padding:0;margin:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.9);color:#545454;
  font-family:inherit;font-size:22px;font-weight:400;line-height:1;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  box-shadow:0 1px 3px rgba(0,0,0,.12);z-index:2
}
.wf-qv__close:hover{color:#111}
.wf-qv__media{padding:16px 16px 0}
.wf-qv__img{width:100%;border-radius:10px;display:block}
.wf-qv__thumbs{display:flex;gap:6px;margin-top:8px;overflow-x:auto}
.wf-qv__thumb{width:60px;height:60px;object-fit:cover;border-radius:6px;cursor:pointer;
  border:1px solid #e1e1e1;flex:none}
.wf-qv__thumb.is-on{border:2px solid #303030}
.wf-qv__body{padding:16px}
.wf-qv__name{font-size:20px;font-weight:600;color:#333;margin-bottom:8px}
.wf-qv__desc{font-size:14px;color:#666;line-height:1.6;white-space:pre-line}

/* ── Astra containment ───────────────────────────────────────────────
   Astra styles bare <button> and <select> — including
   `button:focus,button:hover{color:#fff;border-color:var(--ast-border-color)}`
   — so every state a control can enter must be stated, or the theme fills
   the gap. The add button was the one that showed: white label on a pale
   lavender hover, a button that read as an empty box.

   Declared per control rather than as `.wf-off button {}`: a descendant
   selector outranks the component classes and would override the very rules
   it exists to protect. */
.wf-off .wf-off__arrow:hover,
.wf-off .wf-off__arrow:focus{color:#5E3D7E;border-color:#AB92BF}
.wf-off .wf-off__arrow:focus-visible{outline:2px solid #7d6499;outline-offset:2px}
.wf-off .wf-off__qv:hover,
.wf-off .wf-off__qv:focus{color:#AB92BF;border-color:#e6e1da}
.wf-off .wf-off__btn:focus{color:#7d6499;border-color:#ab92bf}
.wf-off .wf-off__btn.is-in:focus,
.wf-off .wf-off__btn.is-in:hover{color:#fff}
.wf-qv .wf-qv__close:hover,
.wf-qv .wf-qv__close:focus{color:#111;border-color:transparent}
.wf-off .wf-off__pick:focus{color:#303030;background-color:#fff;border-color:#AB92BF}