/* SPICE Trade™ product visual (markup in template-parts/fig-trade.php). Sizes are in em off a
   container-relative base, so the mock-up keeps the picture's proportions at any width. */
.fg-trade{--navy:#13203d;--ink:#141a2e;--mute:#6b7387;--line:#e5e8ef;--o:#ff6a1a;--r:#e8203a;--m:#d4145a;
  --grad:linear-gradient(90deg,#ff5a1a,#e8203a 60%,#d4145a);
  container:fgtr/inline-size;max-width:1400px;margin:0 auto;color:var(--ink);-webkit-font-smoothing:antialiased}
.fg-trade *{box-sizing:border-box}
.fg-trade-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fg-trade svg.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.fg-trade a{color:inherit;text-decoration:none}
.fg-trade a:focus-visible,.fg-trade button:focus-visible,.fg-trade input:focus-visible{outline:2px solid var(--o);outline-offset:2px}
:where(.fg-trade) button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}
.fg-trade h3,.fg-trade h4,.fg-trade p,.fg-trade ol,.fg-trade ul{margin:0;padding:0}
.fg-trade ol,.fg-trade ul{list-style:none}

.fg-trade-app{font-size:1cqw;display:grid;grid-template-columns:13.8em minmax(0,1fr) 24.6em;grid-template-rows:5.4em auto;
  background:#f4f5f8;border:.28em solid var(--navy);border-radius:1.3em;overflow:hidden;
  box-shadow:0 .2em .4em rgba(17,24,47,.06),0 2.6em 4.4em -1.8em rgba(17,24,47,.45)}

/* top bar */
.fg-trade-top{grid-row:1;grid-column:1/-1;display:flex;align-items:center;gap:1.3em;padding:0 1.6em 0 1.8em;background:var(--navy);color:#fff}
.fg-trade-brand{display:flex;align-items:center;gap:.7em;font-size:2em;font-weight:800;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;margin-right:1.4em}
.fg-trade-brand span{background:linear-gradient(90deg,#ff6a1a,#e8203a);-webkit-background-clip:text;background-clip:text;color:transparent}
.fg-trade-mark{width:1.35em;height:1.2em}
.fg-trade-search{flex:1;max-width:33em;display:flex;align-items:center;justify-content:space-between;height:2.9em;padding:0 1em;border-radius:.35em;background:#fff;color:#8a90a0;font-size:1em}
.fg-trade-search svg.i{font-size:1.5em;color:#4b5366}
.fg-trade-logo{margin-left:auto;display:block}
.fg-trade-logo svg{display:block;width:7.2em;height:auto}
.fg-trade-loc{display:flex;align-items:center;gap:.5em}
.fg-trade-pin{display:grid;place-items:center;width:2.6em;height:2.6em;border:1px solid rgba(255,255,255,.35);border-radius:.35em;font-size:1em}
.fg-trade-pin svg.i{font-size:1.4em}
.fg-trade-sel{display:flex;align-items:center;justify-content:space-between;gap:2.4em;height:2.9em;padding:0 .9em;border:1px solid rgba(255,255,255,.45);border-radius:.35em;font-size:1em;white-space:nowrap}
.fg-trade-sel svg.i{font-size:1.3em}
.fg-trade-ic{position:relative;display:grid;place-items:center;font-size:2em;transition:color .2s}
.fg-trade-ic:hover{color:#ffb27a}
.fg-trade-cart b{position:absolute;top:-.35em;right:-.45em;display:grid;place-items:center;min-width:1.25em;height:1.25em;border-radius:99em;background:#ff5a1a;color:#fff;font-size:.42em;font-weight:700;transition:transform .25s}
.fg-trade-cart b.is-bump{transform:scale(1.35)}

/* side menu */
.fg-trade-side{grid-row:2;grid-column:1;display:flex;flex-direction:column;gap:.15em;padding:1.1em .6em;background:#fff;border-right:1px solid var(--line)}
.fg-trade-side a{display:flex;align-items:center;gap:1.05em;padding:1.1em .9em;border-radius:.4em;font-size:.95em;font-weight:500;letter-spacing:.02em;text-transform:uppercase;color:#2b3245;transition:background .2s,color .2s}
.fg-trade-side a svg.i{font-size:1.6em;stroke-width:1.6;color:#4b5366}
.fg-trade-side a:hover{background:#f6f3f1}
.fg-trade-side a.is-on{background:#fff1ea;color:var(--o)}
.fg-trade-side a.is-on svg.i{color:var(--o);fill:var(--o);stroke:none}

/* main */
.fg-trade-main{grid-row:2;grid-column:2;padding:1em .9em 1em 1em;display:flex;flex-direction:column;gap:.9em;min-width:0}
.fg-trade-banner{position:relative;height:9em;border-radius:.6em;overflow:hidden;background:var(--navy)}
.fg-trade-plant{position:absolute;inset:0;width:100%;height:100%}
.fg-trade-btext{position:relative;padding:2.2em 1.9em;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.fg-trade-btext h3{font-size:2.55em;font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:1}
.fg-trade-btext p{margin-top:.5em;font-size:1.2em}
.fg-trade-cat{background:#fff;border-radius:.6em;padding:1.3em 1em .4em}
.fg-trade-cath{display:flex;align-items:center;gap:.8em;padding:0 .3em 1em}
.fg-trade-cath h4{flex:1;font-size:1.75em;font-weight:800;text-transform:uppercase;letter-spacing:.01em}
.fg-trade-field{display:flex;align-items:center;justify-content:space-between;gap:1em;height:2.7em;padding:0 .8em;border:1px solid #d3d7e0;border-radius:.3em;font-size:.95em;color:#3a4256;white-space:nowrap}
.fg-trade-field svg.i{font-size:1.3em}
.fg-trade-find{min-width:17em;color:#8a90a0}
.fg-trade-thead,.fg-trade-item{display:grid;grid-template-columns:10em minmax(0,1fr) 9em 6.5em 11em;align-items:center}
.fg-trade-thead{padding:.85em 1em;background:#eef0f4;border-radius:.3em;font-size:.88em;font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:#2b3245}
.fg-trade-item{padding:.65em .3em;border-bottom:1px solid var(--line);transition:background .25s}
.fg-trade-item:last-child{border-bottom:0}
.fg-trade-item.is-added{background:#fff6f0}
.fg-trade-pic{display:block;width:8em;height:5.6em}
.fg-trade-desc b{display:block;font-size:1.1em;font-weight:700}
.fg-trade-desc small,.fg-trade-price small{display:block;font-size:.95em;color:var(--mute);line-height:1.45}
.fg-trade-price b{font-size:1.25em;font-weight:700}
.fg-trade-qty input{width:4.1em;height:2.5em;padding:0 .7em;border:1px solid #c5cad5;border-radius:.3em;font:inherit;font-size:1em;color:var(--ink);background:#fff;-moz-appearance:textfield}
.fg-trade-qty input::-webkit-inner-spin-button{opacity:1}
.fg-trade-add{justify-self:end;height:2.9em;padding:0 1.4em;border-radius:.35em;background:var(--grad);color:#fff;font-size:1.02em;font-weight:600;text-transform:uppercase;letter-spacing:.02em;box-shadow:0 .3em .8em rgba(232,32,58,.25);transition:transform .2s,box-shadow .2s}
.fg-trade-add:hover{transform:translateY(-.1em);box-shadow:0 .5em 1.2em rgba(232,32,58,.35)}
.fg-trade-add.is-done{background:#1e8a4a;box-shadow:none}

/* order column */
.fg-trade-right{grid-row:1/3;grid-column:3;position:relative;z-index:1;margin-top:5.1em;display:flex;flex-direction:column;gap:.9em;padding:0 .9em .9em 0;min-width:0}
.fg-trade-box{background:#fff;border-radius:.7em;padding:1.4em 1.1em 1.2em;box-shadow:0 .4em 1.4em -.6em rgba(17,24,47,.25)}
.fg-trade-boxh{display:flex;align-items:center;gap:.8em;padding-bottom:.9em;border-bottom:1px solid var(--line)}
.fg-trade-boxh>svg.i{font-size:2em;stroke-width:1.7}
.fg-trade-boxh h4{flex:1;font-size:1.3em;font-weight:800;text-transform:uppercase}
.fg-trade-more{font-size:1.6em!important}
.fg-trade-all{display:flex;align-items:center;gap:.4em;font-size:.95em;font-weight:500;color:#2a64d6}
.fg-trade-all:hover{text-decoration:underline}
.fg-trade-cartl{display:flex;flex-direction:column}
.fg-trade-cartl li{display:grid;grid-template-columns:5em minmax(0,1fr) auto;align-items:center;gap:.6em;padding:.55em 0;border-bottom:1px solid var(--line);animation:fg-trade-in .35s ease}
.fg-trade-cartl .fg-trade-pic{width:4.8em;height:3.4em}
.fg-trade-cartl b{display:block;font-size:1em;font-weight:500;line-height:1.3}
.fg-trade-cartl small{font-size:.92em;color:var(--mute)}
.fg-trade-cartl em{font-style:normal;font-weight:700;font-size:1.05em}
@keyframes fg-trade-in{from{opacity:0;transform:translateY(-.4em)}}
.fg-trade-total{display:flex;align-items:center;justify-content:space-between;padding:.9em 0 .8em}
.fg-trade-total span{font-weight:600}
.fg-trade-total b{font-size:1.5em;font-weight:800}
.fg-trade-create{display:grid;place-items:center;height:3.3em;border-radius:.4em;background:var(--grad);color:#fff!important;font-size:1.05em;font-weight:600;text-transform:uppercase;letter-spacing:.03em;box-shadow:0 .4em 1em rgba(232,32,58,.3);transition:transform .2s}
.fg-trade-create:hover{transform:translateY(-.1em)}
.fg-trade-steps{position:relative;padding-top:.6em}
.fg-trade-steps li{position:relative}
.fg-trade-steps li+li::before{content:'';position:absolute;left:1.75em;top:-1.1em;height:1.6em;width:.14em;background:#ff8a1a}
.fg-trade-steps a{display:flex;align-items:flex-start;gap:1.4em;padding:.4em .2em;border-radius:.5em;transition:background .2s}
.fg-trade-steps a:hover{background:#fff6f0}
.fg-trade-sdot{display:grid;place-items:center;width:3.1em;height:3.1em;border-radius:50%;background:linear-gradient(135deg,#ff9a1a,#ff6a1a);color:#fff;font-size:1em;flex:none}
.fg-trade-sdot svg.i{font-size:1.4em}
.fg-trade-steps b{display:block;font-size:1em;font-weight:600;text-transform:uppercase}
.fg-trade-steps li:first-child b{text-transform:none}
.fg-trade-steps small{display:block;font-size:.9em;color:var(--mute)}
.fg-trade-steps .is-now .fg-trade-sdot{background:linear-gradient(135deg,#e0157a,#c3105f);animation:fg-trade-pulse 2s ease-in-out infinite}
.fg-trade-steps .is-now b{color:var(--m)}
.fg-trade-go{margin-left:auto;align-self:center;font-size:1.4em}
@keyframes fg-trade-pulse{50%{box-shadow:0 0 0 .45em rgba(224,21,122,.15)}}

/* narrow columns and phones */
@container fgtr (max-width:860px){
  .fg-trade-app{font-size:13px;grid-template-columns:1fr;grid-template-rows:auto;border-width:3px;border-radius:16px}
  .fg-trade-top,.fg-trade-side,.fg-trade-main,.fg-trade-right{grid-row:auto;grid-column:1}
  .fg-trade-top{flex-wrap:wrap;gap:10px;padding:12px 14px}
  .fg-trade-brand{font-size:18px;margin-right:auto}
  .fg-trade-search{order:5;flex-basis:100%;max-width:none;height:36px;font-size:12px}
  .fg-trade-logo,.fg-trade-loc{display:none}
  .fg-trade-ic{font-size:22px}
  .fg-trade-side{flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:6px;padding:10px 12px;border-right:0;border-bottom:1px solid var(--line)}
  .fg-trade-side a{flex:none;padding:7px 11px;font-size:11px;gap:6px;border:1px solid var(--line);border-radius:99px}
  .fg-trade-side a svg.i{font-size:14px}
  .fg-trade-main{padding:12px}
  .fg-trade-banner{height:auto}
  .fg-trade-btext{padding:20px 16px}
  .fg-trade-btext h3{font-size:22px}
  .fg-trade-btext p{font-size:13px}
  .fg-trade-cat{padding:14px 10px 4px}
  .fg-trade-cath{flex-wrap:wrap}
  .fg-trade-cath h4{flex-basis:100%;font-size:18px}
  .fg-trade-field{min-width:0}
  .fg-trade-find{min-width:0;flex:1;overflow:hidden}
  .fg-trade-thead{display:none}
  .fg-trade-item{grid-template-columns:76px minmax(0,1fr) auto;grid-template-areas:"pic desc desc" "pic price price" "qty qty add";gap:6px 10px;padding:12px 4px}
  .fg-trade-item .fg-trade-pic{grid-area:pic;width:72px;height:50px}
  .fg-trade-desc{grid-area:desc}.fg-trade-price{grid-area:price;display:flex;align-items:baseline;gap:4px}
  .fg-trade-qty{grid-area:qty}.fg-trade-add{grid-area:add;height:38px;font-size:12px;padding:0 14px}
  .fg-trade-qty input{height:38px}
  .fg-trade-right{margin:0;padding:0 12px 12px}
  .fg-trade-cartl .fg-trade-pic{width:56px;height:40px}
}
@media (prefers-reduced-motion:reduce){.fg-trade *{animation:none!important;transition:none!important}}