/* Storefront > My store: setup card, store header, More menu, Create/Edit store form, and the Back button on Affiliate products. */

/* ---- title line: open-storefront icon + More menu (or Create store) ---- */
.wms-actions{display:flex;align-items:center;gap:8px;flex:none}
.wms-actions .wm-btn svg,.wms-icon-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wms-icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid #8cb9b4;background:#fff;color:var(--wm-teal,#0f766d);display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;transition:background .15s}
.wms-icon-btn:hover{background:#eaf5f2}
.wms-icon-btn:focus-visible,.wms-more:focus-visible{outline:2px solid #111;outline-offset:2px}
.wms-more-wrap{position:relative}
.wms-more{height:38px;padding:0 14px;font-size:12px}
.wms-more svg{width:14px;height:14px}
html body .wms-more,html body .wms-more:focus,html body .wms-more:active{background:#fff;color:#0f766d;border:1px solid #8cb9b4;transform:none;box-shadow:none}
html body .wms-more:hover,html body .wms-more[aria-expanded="true"]{background:#eaf5f2;color:#0b5850;border-color:#8cb9b4;transform:none}
html body .wms-foot .wm-btn-outline,html body .wms-foot .wm-btn-outline:hover{background:#fff;color:#0f766d;border:1px solid #8cb9b4}
html body .wms-foot .wm-btn-outline:hover{background:#eaf5f2}
.wms-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:200px;background:#fff;border:1px solid #e4e7ec;border-radius:12px;box-shadow:0 14px 36px rgba(16,24,40,.16);padding:6px}
.wms-menu[hidden]{display:none}
.wms-menu button{display:block;width:100%;text-align:left;border:0;background:transparent;border-radius:8px;padding:10px 12px;font:500 13px 'Cabinet Grotesk',Arial,sans-serif;color:#111;cursor:pointer}
.wms-menu button:hover{background:#f3f4f5}

/* ---- store header card ---- */
.wms-card{background:#fff;border:1px solid var(--wm-line,#e7e9e7);border-radius:14px;padding:16px 18px;margin:0 0 16px;display:flex;flex-direction:column;gap:12px}
.wms-card-main{display:flex;align-items:center;gap:14px;min-width:0}
.wms-av{width:52px;height:52px;flex:none;border-radius:14px;background:#e7f4f2;color:#0f766d;display:grid;place-items:center;font:700 17px 'Cabinet Grotesk',Arial,sans-serif;overflow:hidden}
.wms-av img{width:100%;height:100%;object-fit:cover}
.wms-meta{min-width:0}
.wms-meta h2{margin:0;font-size:18px;letter-spacing:-.3px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wms-state{font-size:10px;font-weight:700;border-radius:999px;padding:3px 8px;background:#f0f1f2;color:#727c86;letter-spacing:.02em}
.wms-state.is-live{background:#e2f3e9;color:#257052}
.wms-url{display:block;margin-top:3px;font-size:12px;color:#0f766d;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.wms-url:hover{text-decoration:underline}
.wms-bio{font-size:13px;line-height:1.6;color:#526070;max-width:760px}
.wms-bio p{margin:0 0 6px}.wms-bio p:last-child{margin-bottom:0}
.wms-bio ul,.wms-bio ol{margin:4px 0 4px 20px;padding:0}

/* ---- no store yet ---- */
.wms-setup{display:flex;align-items:flex-start;gap:16px;background:#f6fbfa;border:1px dashed #9fcfc8;border-radius:16px;padding:22px;margin:0 0 18px}
.wms-setup-ico{width:52px;height:52px;flex:none;border-radius:14px;background:#e7f4f2;color:#0f766d;display:grid;place-items:center}
.wms-setup-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wms-setup h2{margin:0 0 6px;font-size:18px;letter-spacing:-.3px}
.wms-setup p{margin:0 0 14px;font-size:13px;line-height:1.6;color:#5c6874;max-width:560px}
/* nothing to list yet: just the setup card */
#wmt-offerings.wms-bare .wm-pur-search,#wmt-offerings.wms-bare .wm-pur-table-card{display:none}

/* ---- Create / Edit store form (modal on web, bottom sheet on phones) ---- */
#wmModal.wm-store-modal .wm-modal{width:min(560px,100%);padding:0;border-radius:22px;overflow:auto;max-height:92vh}
#wmModal.wm-store-modal .wm-modal-close{display:none}
#wmModal.wm-store-modal #wmModalBody{display:block}
.wms-head{display:flex;align-items:flex-start;gap:16px;padding:26px 26px 20px;border-bottom:1px solid #f0f1f2}
.wms-head-ico{width:56px;height:56px;flex:none;border-radius:16px;background:#e7f4f2;color:#0f766d;display:grid;place-items:center}
.wms-head-ico svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wms-head-text{flex:1;min-width:0}
#wmModal.wm-store-modal .wms-head h2{margin:2px 0 4px;font-size:22px;letter-spacing:-.4px;color:#0e1a27}
.wms-head-text p{margin:0;font-size:14px;line-height:1.5;color:#98a2b3}
.wms-x{flex:none;width:44px;height:44px;border-radius:12px;border:1px solid #eef0f3;background:#fff;color:#8793a6;display:grid;place-items:center;cursor:pointer}
.wms-x:hover{background:#f3f4f5}
.wms-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.wms-form{padding:22px 26px 0;display:flex;flex-direction:column;gap:20px}
.wms-field{display:flex;flex-direction:column;gap:8px}
.wms-field>label{font:700 15px 'Cabinet Grotesk',Arial,sans-serif;color:#0e1a27}
.wms-field>label i{color:#e5484d;font-style:normal;margin-left:2px}
.wms-field input[type=text],.wms-field input:not([type]){width:100%;height:52px;border:1px solid #e4e7ec;border-radius:14px;padding:0 18px;font:400 15px 'Cabinet Grotesk',Arial,sans-serif;color:#0e1a27;background:#fff}
.wms-field input::placeholder{color:#a3adbd}
.wms-field input:focus{outline:2px solid #b4d8d3;border-color:#0f766d}
.wms-slug{display:flex;align-items:center;border:1px solid #e4e7ec;border-radius:14px;overflow:hidden;background:#fff}
.wms-slug:focus-within{outline:2px solid #b4d8d3;border-color:#0f766d}
.wms-slug span{padding:0 0 0 18px;color:#98a2b3;font-size:15px;white-space:nowrap}
.wms-slug input{border:0!important;outline:0!important;height:50px!important;padding:0 18px 0 2px!important;border-radius:0!important;flex:1;min-width:0}
.wms-hint{font-size:12px;color:#8793a6;line-height:1.4;word-break:break-all}
.wms-err{font-size:12px;color:#d92d20;min-height:0}
.wms-err:empty{display:none}
.wms-field input.has-err,.wms-slug:has(.has-err),.wms-rt.has-err{border-color:#e5484d}
.wms-rt{border:1px solid #e4e7ec;border-radius:14px;overflow:hidden;background:#fff}
.wms-rt:focus-within{outline:2px solid #b4d8d3;border-color:#0f766d}
.wms-rt-bar{display:flex;align-items:center;gap:4px;padding:8px 12px;background:#f8f9fb;border-bottom:1px solid #e4e7ec;overflow-x:auto;scrollbar-width:none}
.wms-rt-bar::-webkit-scrollbar{display:none}
.wms-rt-bar button{flex:none;width:36px;height:36px;border:0;border-radius:8px;background:transparent;color:#5b6677;display:grid;place-items:center;cursor:pointer}
.wms-rt-bar button:hover{background:#eceff3;color:#0e1a27}
.wms-rt-bar button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wms-rt-sep{width:1px;height:22px;background:#dfe3e8;margin:0 6px;flex:none}
.wms-rt-area{min-height:120px;max-height:240px;overflow:auto;padding:14px 18px;font:400 15px/1.55 'Cabinet Grotesk',Arial,sans-serif;color:#0e1a27;outline:0}
.wms-rt-area[data-empty]:before{content:attr(data-placeholder);color:#a3adbd;pointer-events:none;display:block}
.wms-rt-area[data-empty]>*{display:none}
.wms-rt-area p{margin:0 0 6px}
.wms-rt-area ul,.wms-rt-area ol{margin:4px 0 4px 22px;padding:0}
.wms-foot{position:sticky;bottom:0;display:flex;justify-content:flex-end;gap:10px;padding:16px 0 22px;margin-top:2px;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 28%)}
.wms-foot .wm-btn{min-height:46px;padding:0 22px;font-size:13px;border-radius:12px}
.wms-foot .wm-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
@media(max-width:720px){
  /* sit above the app's bottom tab bar (z-index 1000) so Cancel / Create store stay reachable */
  #wmModal.wm-store-modal{z-index:1100}
}
@media(max-width:640px){
  #wmModal.wm-store-modal{align-items:end;padding:0}
  #wmModal.wm-store-modal .wm-modal{width:100%;max-height:94vh;max-height:94dvh;border-radius:22px 22px 0 0}
  .wms-head{padding:20px 18px 16px;gap:12px}
  .wms-head-ico{width:48px;height:48px;border-radius:14px}
  #wmModal.wm-store-modal .wms-head h2{font-size:19px}
  .wms-head-text p{font-size:13px}
  .wms-x{width:40px;height:40px}
  .wms-form{padding:18px 18px 0;gap:18px}
  .wms-field input[type=text],.wms-field input:not([type]),.wms-slug input{font-size:16px}
  .wms-foot{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .wms-foot .wm-btn{flex:1}
  .wms-setup{flex-direction:column;padding:18px}
  .wms-card{padding:14px}
  .wms-av{width:46px;height:46px}
}
@media(max-width:760px){
  /* title line keeps the title on the left and the buttons on the right, like the other table pages */
  body.storefront-app .wm-pur-page > .wm-page-title > .wms-actions{margin-left:auto}
}

/* ---- Back button on Affiliate products (returns to All offerings) ---- */
.wm-net-back{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:#0f766d;font:600 13px 'Cabinet Grotesk',Arial,sans-serif;padding:6px 10px 6px 4px;margin:0 0 10px -4px;border-radius:8px;cursor:pointer}
.wm-net-back:hover{background:#eaf5f2}
.wm-net-back:focus-visible{outline:2px solid #111;outline-offset:2px}
/* "Affiliate products" button on the All offerings title line */
.wm-aff-products-btn{white-space:nowrap;flex:none}

/* Stage 1: soft shadow around the store card */
.wms-card{box-shadow:0 2px 8px rgba(16,24,40,.05)}

/* ===== Storefront header carries the tab name; page-title rows (and their small copy) are gone ===== */
body[data-wmu-view="home"] .wm-page-title,
body[data-wmu-view="explore"] .wm-page-title,
body[data-wmu-view="offerings"] .wm-page-title,
body[data-wmu-view="coupons"] .wm-page-title,
body[data-wmu-view="affiliates"] .wm-page-title,
body[data-wmu-view="sales"] .wm-page-title,
body[data-wmu-view="bookings"] .wm-page-title,
body[data-wmu-view="customers"] .wm-page-title{display:none!important}
body[data-wmu-view="network"] .wm-net-back{display:none!important}

/* ===== My store: one line = store card (with its own vertical ⋮ menu) + filter + export ===== */
#wmt-offerings{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
#wmt-offerings > .wms-card{flex:1 1 0;min-width:0;margin:0}
#wmt-offerings > .wms-setup{flex:1 1 100%;margin:0}
#wmt-offerings > .wm-pur-search{flex:0 0 auto;border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;gap:8px}
#wmt-offerings > .wm-pur-search > .wm-input{display:none!important}
#wmt-offerings .wm-filter-trigger span{display:none}
#wmt-offerings .wm-filter-trigger,#wmt-offerings .wm-export-trigger{width:42px;height:42px;padding:0;justify-content:center}
#wmt-offerings > .wm-pur-table-card{flex:0 0 100%}
.wms-card-main .wms-more-card{margin-left:auto;flex:none}
.wms-dots{width:36px;height:36px;border:0;background:transparent;border-radius:50%;display:grid;place-items:center;color:#111;cursor:pointer;padding:0}
.wms-dots:hover,.wms-dots[aria-expanded="true"]{background:#f1f3f2}
.wms-card .wms-menu{right:0}
@media(max-width:720px){#wmt-offerings{gap:8px}#wmt-offerings > .wm-pur-search{gap:6px}#wmt-offerings .wm-filter-trigger,#wmt-offerings .wm-export-trigger{width:40px;height:40px}}

/* ===== No blue tint in text bars: neutral focus + no tap flash ===== */
body.storefront-app,body.storefront-app *{-webkit-tap-highlight-color:transparent}
body.storefront-app input:focus,body.storefront-app select:focus,body.storefront-app textarea:focus,
body.storefront-app .wm-field input:focus,body.storefront-app .wm-field textarea:focus,body.storefront-app .wm-field select:focus{outline:none!important;box-shadow:none!important;border-color:#111!important}
body.storefront-app .wm-global-search:focus-within,body.storefront-app .wm-pur-search:focus-within > .wm-input{border-color:#111}
body.storefront-app input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px #fff inset!important}
.wm-aff-net-pct input{border-color:#d9dde0!important}
.wm-aff-net-check input:checked+.wm-aff-net-box,.wm-file-access input:checked+.wm-aff-net-box{background:#111!important;border-color:#111!important}

/* ===== Plain black "+" (no coloured circle) everywhere in Storefront ===== */
html body .wmu-add,html body .wmu-add:hover,html body .wmu-add:active{background:transparent!important;color:#111!important;border:0!important;box-shadow:none!important;width:40px;height:40px}
html body .wmu-add svg{width:24px;height:24px;stroke-width:2}

/* ===== Phones: My store is the first page; the tools slide in from the right as pages of their own ===== */
.wmu-back{display:none}
@media(max-width:720px){
  .wmu-pill[data-wmu-view="offerings"]{display:none!important}
  body.wmu-subpage .wmu-pills{display:none!important}
  body.wmu-subpage .wm-mobile-brand{display:none!important}
  body.wmu-subpage .wmu-back{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;background:transparent;color:#111;padding:0;margin-left:-6px;flex:none}
  body.wmu-subpage .wmu-top-title{margin-left:2px}
  .wmu-slide-in{animation:wmuSlideIn .26s ease-out}
}
@keyframes wmuSlideIn{from{transform:translateX(100%);opacity:.6}to{transform:translateX(0);opacity:1}}

/* Phones: the card takes the whole line; filter + export live in the card's menu */
.wms-m-only{display:none!important}
@media(max-width:720px){
  .wms-menu .wms-m-only{display:block!important}
  #wmt-offerings > .wm-pur-search{display:none!important}
  #wmt-offerings > .wms-card{flex:1 1 100%}
}

/* Empty store: the illustration with a green "Create an offering" text link (no button) */
.wms-empty-art{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0 6px}
.wms-empty-art img{display:block;width:190px;max-width:62%;height:auto;margin:0 auto;user-select:none;-webkit-user-drag:none}
.wms-empty-link{border:0;background:none;padding:8px 10px;font:inherit;font-size:15px;font-weight:600;color:var(--wm-teal-dark,#0F766D);cursor:pointer;-webkit-tap-highlight-color:transparent}
.wms-empty-link:active{opacity:.7}
@media (hover:hover){.wms-empty-link:hover{text-decoration:underline}}
@media (max-width:720px){.wms-empty-art img{width:160px}}