/* ---------- Storefront Feature Bar (Nov 10 2026, schema 116) ----------
   3–4 quick links under the Storefront Banner: icon in a circle, bold title, optional short description, thin dividers between links.
   Colours are custom properties written by /store-theme/{store}/feature-bar.css (the CSP forbids inline styles); the defaults below have
   zero specificity so that stylesheet always wins. Desktop: one row. ≤980 px: 2 × 2. ≤560 px: one column. */
:where(.sf-fbar){--fb-bg:#f5f7fa;--fb-to:#ffffff;--fb-light:#fdfdfe;--fb-border:#e3e9f2;--fb-text:#092c50;--fb-accent:#ff1493}
.sf-fbar{position:relative;overflow:hidden;border:1.5px solid var(--fb-border);border-radius:18px;background:var(--fb-bg);color:var(--fb-text);box-shadow:0 4px 14px rgba(9,44,80,.07)}
.sf-fbar.fb-style-gradient{background:linear-gradient(90deg,var(--fb-bg),var(--fb-to))}
.sf-fbar.fb-style-light{background:var(--fb-light)}
.sf-fbar.fb-style-image{background:var(--fb-bg) var(--fb-image,none) center/cover no-repeat}
.sf-fbar.fb-style-image .sf-fbar-list{margin:10px;border-radius:12px;background:color-mix(in srgb,var(--fb-bg) 86%,transparent)}
/* Approved decorative patterns, tinted with the accent colour. */
.sf-fbar.fb-pat-dots{background-color:var(--fb-bg);background-image:radial-gradient(color-mix(in srgb,var(--fb-accent) 22%,transparent) 1.6px,transparent 1.9px);background-size:16px 16px}
.sf-fbar.fb-pat-stripes{background-color:var(--fb-bg);background-image:repeating-linear-gradient(135deg,color-mix(in srgb,var(--fb-accent) 9%,transparent) 0 10px,transparent 10px 22px)}
.sf-fbar.fb-pat-leaves::before,.sf-fbar.fb-pat-leaves::after{content:"";position:absolute;top:0;bottom:0;width:96px;background:var(--fb-accent);opacity:.32;pointer-events:none;
  -webkit-mask:url("/assets/feature-bar/leaves.svg") center/contain no-repeat;mask:url("/assets/feature-bar/leaves.svg") center/contain no-repeat}
.sf-fbar.fb-pat-leaves::before{left:-14px}
.sf-fbar.fb-pat-leaves::after{right:-14px;transform:scaleX(-1)}
.sf-fbar.fb-pat-ends::before,.sf-fbar.fb-pat-ends::after{content:"";position:absolute;top:0;bottom:0;width:58px;pointer-events:none}
.sf-fbar.fb-pat-ends::before{left:0;background:var(--fb-accent);clip-path:polygon(0 0,100% 0,45% 100%,0 100%)}
.sf-fbar.fb-pat-ends::after{right:0;background:var(--fb-to);clip-path:polygon(55% 0,100% 0,100% 100%,0 100%)}
.sf-fbar-list{position:relative;z-index:1;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:0;padding:12px 16px;list-style:none}
.sf-fbar.fb-pat-leaves .sf-fbar-list,.sf-fbar.fb-pat-ends .sf-fbar-list{padding-left:52px;padding-right:52px}
.sf-fbar-item{display:flex;min-width:0}
.sf-fbar-item+.sf-fbar-item{border-left:1px solid color-mix(in srgb,var(--fb-text) 22%,transparent)}
.sf-fbar-link{display:flex;align-items:center;gap:12px;flex:1;min-width:0;min-height:58px;margin:2px 6px;padding:6px 10px;border-radius:12px;color:var(--fb-text);text-decoration:none}
.sf-fbar-link:hover{background:color-mix(in srgb,var(--fb-text) 7%,transparent)}
.sf-fbar-link:focus-visible{outline:3px solid var(--fb-accent);outline-offset:2px}
.sf-fbar-icon{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:color-mix(in srgb,var(--fb-accent) 14%,#fff);border:1.5px solid color-mix(in srgb,var(--fb-accent) 40%,transparent);color:var(--fb-accent)}
.sf-fbar-icon .ico{width:24px;height:24px}
.sf-fbar-text{display:grid;gap:2px;min-width:0}
.sf-fbar-text strong{font:700 15.5px/1.25 "DM Sans",system-ui,sans-serif;color:var(--fb-text);overflow-wrap:break-word}
.sf-fbar-text small{font-size:13px;line-height:1.3;color:var(--fb-text);opacity:.82;overflow-wrap:break-word}
@media (max-width:980px){
  .sf-fbar-list{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
  .sf-fbar-item+.sf-fbar-item{border-left:0}
  .sf-fbar-item:nth-child(2n){border-left:1px solid color-mix(in srgb,var(--fb-text) 22%,transparent)}
  .sf-fbar-item:nth-child(n+3){border-top:1px solid color-mix(in srgb,var(--fb-text) 22%,transparent)}
}
@media (max-width:560px){
  .sf-fbar-list{grid-template-columns:1fr;padding:6px 10px}
  .sf-fbar.fb-pat-leaves .sf-fbar-list,.sf-fbar.fb-pat-ends .sf-fbar-list{padding-left:30px;padding-right:30px}
  .sf-fbar-item:nth-child(2n){border-left:0}
  .sf-fbar-item+.sf-fbar-item{border-top:1px solid color-mix(in srgb,var(--fb-text) 22%,transparent)}
  .sf-fbar-icon{width:42px;height:42px}
  .sf-fbar.fb-pat-leaves::before,.sf-fbar.fb-pat-leaves::after{width:56px}
  .sf-fbar.fb-pat-ends::before,.sf-fbar.fb-pat-ends::after{width:26px}
}
@media (prefers-reduced-motion:no-preference){.sf-fbar-link{transition:background .15s}}

/* ---------- My Storefront mini preview (.sfp-v2): the bar in the storefront's order, scaled down ---------- */
.sfp .sfp-fbar[hidden]{display:none}
.sfp .sf-fbar{border-radius:10px;box-shadow:none}
.sfp .sf-fbar .sf-fbar-list,.sfp .sf-fbar.fb-pat-leaves .sf-fbar-list,.sfp .sf-fbar.fb-pat-ends .sf-fbar-list{grid-auto-flow:column;grid-template-columns:none;padding:4px 18px}
.sfp .sf-fbar .sf-fbar-item+.sf-fbar-item{border-left:1px solid color-mix(in srgb,var(--fb-text) 22%,transparent);border-top:0}
.sfp .sf-fbar-link{gap:5px;min-height:0;margin:0 2px;padding:3px 4px;pointer-events:none}
.sfp .sf-fbar-icon{width:22px;height:22px;border-width:1px}.sfp .sf-fbar-icon .ico{width:13px;height:13px}
.sfp .sf-fbar-text strong{font-size:10.5px}.sfp .sf-fbar-text small{display:none}
.sfp .sf-fbar::before,.sfp .sf-fbar::after{width:18px!important}

/* ---------- Feature Bar editor (My Storefront → Storefront Details) ---------- */
.creator .fbe .fbe-group{margin:14px 0 0;padding:0;border:0;min-width:0}
.creator .fbe .fbe-row{display:grid;gap:6px;margin-top:14px}
.creator .fbe .fbe-row[hidden],.creator .fbe [data-fbe-target][hidden],.creator .fbe .fbe-link[hidden],.creator .fbe [data-fbe-add][hidden]{display:none}
.creator .fbe .fbe-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.creator .fbe button.fbe-preset{display:flex;align-items:center;gap:10px;justify-content:flex-start;width:100%;min-height:54px;padding:8px 10px;border:1.5px solid #d6deea;border-radius:12px;background:#fff;color:#1f2a44;text-align:left;font-weight:400}
.creator .fbe button.fbe-preset:hover{border-color:var(--fuchsia,#ff1493);background:#fff;color:#1f2a44}
.creator .fbe button.fbe-preset[aria-checked=true]{border-color:var(--fuchsia,#ff1493);box-shadow:0 0 0 2px color-mix(in srgb,var(--fuchsia,#ff1493) 25%,transparent)}
.creator .fbe .fbe-preset strong{display:block;font-size:14px}.creator .fbe .fbe-preset small{display:block;font-size:12px;color:#5b6b82}
.fbe-swatch{flex:none;position:relative;width:34px;height:34px;border-radius:9px;border:1.5px solid #d6deea;overflow:hidden}
.fbe-swatch i{position:absolute;right:4px;bottom:4px;width:11px;height:11px;border-radius:50%}
.fbe-swatch-playful{background:#eee8fb;border-color:#d8ccf3}.fbe-swatch-playful i{background:#7b4fd8}
.fbe-swatch-elegant{background:#fbf6ea;border-color:#e9dfc6}.fbe-swatch-elegant i{background:#6f8f4e}
.fbe-swatch-simple{background:#f5f7fa;border-color:#e3e9f2}.fbe-swatch-simple i{background:#ff1493}
.fbe-swatch-colorful{background:linear-gradient(90deg,#d8f9f9,#ffe1f0);border-color:#2ee6e6}.fbe-swatch-colorful i{background:#ff1493}
.fbe-swatch-professional{background:linear-gradient(115deg,#ff1493 0 22%,#092c50 22% 78%,#2ee6e6 78%);border-color:#092c50}.fbe-swatch-professional i{background:#fff}
.creator .fbe .fbe-colors{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.creator .fbe .fbe-color{display:grid;gap:6px;padding:10px;border:1px solid #e3e9f2;border-radius:12px}
.creator .fbe .fbe-color label{display:block}.creator .fbe .fbe-color small{display:block;font-size:12px;color:#5b6b82}
.creator .fbe .fbe-hex{display:flex;gap:6px;align-items:center}
.creator .fbe .fbe-hex input[data-fbe-hex]{flex:1;min-width:0;font-family:ui-monospace,Consolas,monospace;text-transform:uppercase}
.creator .fbe .fbe-hex input[data-fbe-hex]:invalid{border-color:#c62828}
.creator .fbe .fbe-hex input[type=color]{flex:none;width:42px;height:38px;padding:2px;border-radius:8px}
.creator .fbe .fbe-links{display:grid;gap:12px;margin:10px 0;padding:0;list-style:none}
.creator .fbe .fbe-link{padding:12px;border:1px solid #e3e9f2;border-radius:14px;background:#fbfcfe}
.creator .fbe .fbe-link-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.creator .fbe .fbe-link-actions{display:flex;flex-wrap:wrap;gap:6px}
.creator .fbe .fbe-link-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.creator .fbe .fbe-link-grid label{display:grid;gap:4px;font-weight:600;font-size:14px}
.creator .fbe .fbe-icons{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;border:0}
.creator .fbe .fbe-icons legend{font-weight:600;font-size:14px;margin-bottom:4px}
.creator .fbe .fbe-icon{display:grid;place-items:center;width:42px;height:42px;border:1.5px solid #d6deea;border-radius:10px;background:#fff;color:#092c50;cursor:pointer}
.creator .fbe .fbe-icon input{position:absolute;opacity:0;width:1px;height:1px}
.creator .fbe .fbe-icon:has(input:checked){border-color:var(--fuchsia,#ff1493);color:var(--fuchsia,#ff1493);background:#fff0f7}
.creator .fbe .fbe-icon:has(input:focus-visible){outline:3px solid var(--fuchsia,#ff1493);outline-offset:2px}
.creator .fbe .fbe-preview{margin-top:16px;padding-top:12px;border-top:1px solid #e3e9f2}
.creator .fbe .fbe-preview h3{margin:0;font-size:16px}
.creator .fbe .fbe-frame{padding:12px;border-radius:14px;background:#f2f6fb;overflow:hidden}
.creator .fbe .fbe-frame.is-mobile{max-width:390px;margin:0 auto;border:8px solid #1f2a44;border-radius:28px}
.creator .fbe .fbe-frame a{cursor:default}
.creator .fbe .fbe-empty{margin:0;padding:14px;border:1.5px dashed #c9d3e3;border-radius:12px;text-align:center;color:#5b6b82}
.creator .fbe .fbe-skipped{margin:8px 0 0;padding-left:18px;font-size:13px;color:#8a5a00}
.creator .fbe .fbe-off{margin:8px 0 0}
/* The preview frames show the desktop row or the phone column whatever the editor's own window width. */
.creator .fbe .fbe-frame.is-desktop .sf-fbar .sf-fbar-list{grid-auto-flow:column;grid-template-columns:none}
.creator .fbe .fbe-frame.is-desktop .sf-fbar .sf-fbar-item{border-top:0;border-left:0}
.creator .fbe .fbe-frame.is-desktop .sf-fbar .sf-fbar-item+.sf-fbar-item{border-left:1px solid color-mix(in srgb,var(--fb-text) 22%,transparent)}
.creator .fbe .fbe-frame.is-desktop .sf-fbar-text small{font-size:12px}
.creator .fbe .fbe-frame.is-mobile .sf-fbar .sf-fbar-list{grid-auto-flow:row;grid-template-columns:1fr;padding:6px 10px}
.creator .fbe .fbe-frame.is-mobile .sf-fbar .sf-fbar-item{border-left:0}
.creator .fbe .fbe-frame.is-mobile .sf-fbar .sf-fbar-item+.sf-fbar-item{border-top:1px solid color-mix(in srgb,var(--fb-text) 22%,transparent)}
@media (max-width:700px){.creator .fbe .fbe-link-grid{grid-template-columns:1fr}.creator .fbe .fbe-frame.is-desktop{overflow-x:auto}.creator .fbe .fbe-frame.is-desktop .sf-fbar{min-width:640px}}