/* Taste of Ink configurator — scoped styles. Neutral enough to sit in the
   Woo theme, with the ink/paper/brass identity carried through. */
.toi-configurator{ --toi-ink:#15110d; --toi-paper:#f5efe2; --toi-paper2:#ece3d2;
  --toi-line:#d9cdb6; --toi-brass:#a9854f; --toi-teal:#2f6f6a; --toi-muted:#776e60; --toi-warn:#9a4b2e;
  --toi-mono:inherit;
  --toi-display:inherit;
  --toi-sticky-top:100px;
  --toi-ledger-head:#7a1f1f;
  container-type:inline-size;
  margin:18px 0; color:var(--toi-ink); }

.toi-wrap{ display:grid; gap:20px; }
@container (min-width:600px){ .toi-wrap{ grid-template-columns:1fr 270px; align-items:start; } .toi-aside{ position:sticky; top:var(--toi-sticky-top,100px); align-self:start; } }

.toi-fs{ border:1px solid var(--toi-line); border-radius:12px; margin:0 0 14px; padding:12px 12px 14px; background:rgba(255,255,255,.5); }
.toi-fs legend{ font-family:var(--toi-mono); text-transform:uppercase; letter-spacing:.14em; font-size:11px; color:#3a342c; padding:0 6px; }
.toi-opts{ display:flex; flex-wrap:wrap; gap:8px; }
.toi-pills .toi-opt label{ min-width:60px; text-align:center; align-items:center; }
.toi-opt{ position:relative; }
.toi-opt input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.toi-opt label{ display:flex; flex-direction:column; gap:2px; cursor:pointer; border:1px solid var(--toi-line);
  border-radius:10px; padding:8px 11px; background:#fff; font-size:14px; line-height:1.2;
  transition:border-color .15s, box-shadow .15s, background .15s; }
.toi-opt .toi-price{ font-family:var(--toi-mono); font-size:12px; color:var(--toi-muted); }
.toi-opt input:checked + label{ border-color:var(--toi-brass); box-shadow:0 0 0 1px var(--toi-brass); background:linear-gradient(#fff,#fbf5ea); }
.toi-opt input:focus-visible + label{ outline:2px solid var(--toi-teal); outline-offset:2px; }
.toi-opt input:disabled + label{ opacity:.4; cursor:not-allowed;
  background:repeating-linear-gradient(45deg,#fff,#fff 6px,#f3ece0 6px,#f3ece0 12px); }
.toi-fs select{ font-size:14px; padding:8px 10px; border:1px solid var(--toi-line); border-radius:10px; background:#fff; width:100%; max-width:320px; }
.toi-freepick{ margin-top:10px; }
.toi-lbl{ display:block; font-size:11px; color:var(--toi-muted); font-family:var(--toi-mono);
  text-transform:uppercase; letter-spacing:.1em; margin:0 0 5px; }

/* Add to Cart block, relocated here by configurator.js (moveAddToCart) so it
   floats with the sticky price aside on desktop and stacks under it on
   narrow screens. Resets EA's original column-width assumptions so it fits
   the 270px aside instead of its old wider slot. */
.toi-aside .e-atc-qty-button-holder{ width:100%; max-width:none; margin-top:14px; }
.toi-aside .e-atc-qty-button-holder .quantity,
.toi-aside .e-atc-qty-button-holder .single_add_to_cart_button{ width:100%; }

.toi-ledger{ border:1px solid var(--toi-ink); border-radius:12px; overflow:hidden; background:#fff; }
.toi-lhead{ background:var(--toi-ledger-head,#7a1f1f); color:var(--toi-paper); padding:11px 15px; }
.toi-lhead .toi-t{ font-family:var(--toi-mono); text-transform:uppercase; letter-spacing:.2em; font-size:10px; color:var(--toi-brass); }
.toi-lbody{ padding:8px 15px 4px; }
.toi-li{ display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:6px 0; border-bottom:1px dashed var(--toi-line); }
.toi-li:last-child{ border-bottom:0; }
.toi-li .toi-n{ color:#3a342c; } .toi-li .toi-v{ font-family:var(--toi-mono); white-space:nowrap; }
.toi-li.toi-muted .toi-n, .toi-li.toi-muted .toi-v{ color:var(--toi-muted); }
.toi-total{ display:flex; justify-content:space-between; align-items:baseline; padding:13px 15px; border-top:2px solid var(--toi-ink); background:var(--toi-paper2); }
.toi-total .toi-lab{ font-family:var(--toi-mono); text-transform:uppercase; letter-spacing:.16em; font-size:11px; }
.toi-total .toi-amt{ font-family:var(--toi-display); font-size:28px; font-weight:600; font-variant-numeric:tabular-nums; }
.toi-perqty{ padding:0 15px 13px; font-size:11px; color:var(--toi-muted); font-family:var(--toi-mono); }
.toi-unavail{ margin:8px 15px 13px; padding:10px 12px; border-radius:10px; background:#fbeee7; color:var(--toi-warn); font-size:12.5px; border:1px solid #e7c4b3; }
.toi-hidden{ display:none; }

/* education popovers */
.toi-fs{ position:relative; }
.toi-fs legend{ display:inline-flex; align-items:center; gap:7px; }
.toi-help{ display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px;
  border-radius:50%; border:1px solid var(--toi-brass); background:#fff; color:var(--toi-brass-deep,#8a6a3a);
  font-family:var(--toi-mono); font-size:11px; line-height:1; cursor:pointer; padding:0; transition:background .15s,color .15s; }
.toi-help:hover{ background:var(--toi-brass); color:#fff; }
.toi-help:focus-visible{ outline:2px solid var(--toi-teal); outline-offset:2px; }
.toi-pop{ position:absolute; z-index:40; top:30px; left:8px; max-width:300px; width:max-content;
  background:#fff; border:1px solid var(--toi-ink); border-radius:12px; padding:13px 15px;
  box-shadow:0 12px 30px rgba(21,17,13,.18); display:none; }
.toi-pop.open{ display:block; animation:toi-pop-in .12s ease-out; }
@keyframes toi-pop-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.toi-pop::before{ content:""; position:absolute; top:-7px; left:16px; width:12px; height:12px; background:#fff;
  border-left:1px solid var(--toi-ink); border-top:1px solid var(--toi-ink); transform:rotate(45deg); }
.toi-pop h4{ margin:0 0 6px; font-family:var(--toi-display); font-size:15px; font-weight:600; color:var(--toi-ink); }
.toi-pop p{ margin:0; font-size:13px; line-height:1.5; color:#3a342c; }
.toi-pop img{ display:block; max-width:100%; border-radius:8px; margin-top:10px; }

/* family-level note (e.g. "includes one ink color") */
.toi-note{ font-size:13px; color:var(--toi-brass-deep,#8a6a3a); background:#fbf5ea;
  border:1px solid var(--toi-line); border-radius:8px; padding:8px 12px; margin-bottom:14px; }

/* PMS code text field */
.toi-freetext{ margin-top:12px; }
.toi-freetext input{ font-family:inherit; font-size:14px; padding:9px 10px; border:1px solid var(--toi-line); border-radius:10px; background:#fff; width:100%; max-width:320px; }
.toi-freetext input:focus{ outline:2px solid var(--toi-teal); }

/* positional color/code inputs (per-side foil, metallic, PMS) */
.toi-pos{ display:flex; flex-direction:column; gap:9px; margin-top:12px; }
.toi-pos-row{ display:flex; flex-direction:column; gap:4px; }
.toi-pos-row select, .toi-pos-row input{ font-family:inherit; font-size:14px; padding:8px 10px;
  border:1px solid var(--toi-line); border-radius:10px; background:#fff; width:100%; max-width:320px; }
.toi-pos-row input:focus, .toi-pos-row select:focus{ outline:2px solid var(--toi-teal); }

/* free multi-select (design styles) */
.toi-multi{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.toi-multi-hint{ width:100%; font-size:12px; color:var(--toi-muted); margin-bottom:2px; }
.toi-multi .toi-opt{ margin:0; }
.toi-multi .toi-opt input{ position:absolute; opacity:0; width:0; height:0; }
.toi-multi .toi-opt label{ display:inline-block; padding:7px 12px; border:1px solid var(--toi-line);
  border-radius:999px; cursor:pointer; font-size:13px; background:#fff; text-transform:capitalize; }
.toi-multi .toi-opt input:checked + label{ background:var(--toi-ink); color:var(--toi-paper); border-color:var(--toi-ink); }
.toi-multi .toi-opt input:disabled + label{ opacity:.4; cursor:not-allowed; }

/* "files after checkout" note under the Add to Cart button (artwork products) */
.toi-upload-note{ margin-top:10px; font-size:12px; line-height:1.4; color:var(--toi-muted,#776e60); text-align:center; }