/*
 * Voléfanka Configurator.
 *
 * Every colour, face and rule width is read from the theme's own custom
 * properties with a literal fallback, so the configurator inherits the
 * storefront on volefanka.com and still looks like itself if the plugin is
 * ever run under a different theme.
 *
 * Zero radius, 2px rules, Archivo 800 for anything that shouts: the same
 * three decisions the storefront is built on.
 */

.vfc{
  --vfc-bg:var(--color-bg,#f3f2f2);
  --vfc-surface:var(--color-surface,#eae9e9);
  --vfc-text:var(--color-text,#201e1d);
  --vfc-accent:var(--color-accent,#c5975d);
  --vfc-accent-600:var(--color-accent-600,#bf8c4c);
  --vfc-accent-700:var(--color-accent-700,#8b6332);
  --vfc-on-accent:var(--color-on-accent,#201e1d);
  --vfc-line:color-mix(in srgb,var(--vfc-text) 40%,transparent);
  --vfc-heading:var(--font-heading,"Archivo",system-ui,sans-serif);
  --vfc-body:var(--font-body,"Archivo",system-ui,sans-serif);

  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
  gap:clamp(24px,4vw,56px);
  align-items:start;
  color:var(--vfc-text);
  font-family:var(--vfc-body);
  font-size:15px;
  line-height:1.55;
}

/* color-mix is not everywhere; a flat rule is a fine second best. */
@supports not (color:color-mix(in srgb,#000 40%,transparent)){
  .vfc{ --vfc-line:rgba(32,30,29,.4); }
}

@media (max-width:900px){
  .vfc{ grid-template-columns:1fr; }
}

.vfc *,
.vfc *::before,
.vfc *::after{ box-sizing:border-box; }

/* ---------------------------------------------------------------- stage */

.vfc-stage{
  position:sticky; top:88px;
  border:2px solid var(--vfc-line);
  background:var(--vfc-surface);
}

@media (max-width:900px){
  .vfc-stage{ position:static; }
}

.vfc-stage-inner{
  display:flex; align-items:center; justify-content:center;
  padding:clamp(12px,3vw,32px);
  /* The shirt photographs are square with an alpha background, so the stage
     holds a square regardless of what is dropped into it. */
  aspect-ratio:1/1;
}

.vfc-shirt{
  position:relative;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  touch-action:none;               /* dragging an element must not scroll the page */
}

.vfc-photo{
  display:block;
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  background:transparent;
  user-select:none; -webkit-user-drag:none;
}

/*
 * The print area is positioned against the PHOTO's painted box, not the
 * stage: an image letterboxed by object-fit would otherwise put the chest
 * print somewhere over the customer's shoulder. JS measures the photo and
 * writes these four properties.
 */
.vfc-area{
  position:absolute;
  overflow:hidden;
  outline:1px dashed transparent;
  transition:outline-color .2s;
}
.vfc[data-editing] .vfc-area{ outline-color:var(--vfc-line); }

.vfc-el{
  position:absolute;
  transform:translate(-50%,-50%) rotate(var(--vfc-rotate,0deg));
  transform-origin:center;
  cursor:grab;
  white-space:nowrap;
  line-height:1;
  user-select:none;
  padding:2px 4px;
}
.vfc-el[data-dragging]{ cursor:grabbing; }
.vfc-el.is-on{ outline:2px solid var(--vfc-accent); outline-offset:2px; }
.vfc-el img{ display:block; max-width:none; pointer-events:none; }
/* No font-weight here: each bundled face ships at one weight and the script
   sets it inline, so a 400-only face is never asked to fake an 800. */
.vfc-el span{ display:block; pointer-events:none; letter-spacing:.02em; }

/* ------------------------------------------------------------ stage bar */

.vfc-stage-bar{
  display:flex; align-items:center; gap:8px;
  border-top:2px solid var(--vfc-line);
  padding:8px;
}

.vfc-sides{ display:flex; gap:8px; margin-right:auto; }

.vfc-side,
.vfc-icon,
.vfc-thumb,
.vfc-swatch,
.vfc-size,
.vfc-add,
.vfc-step,
.vfc-cta,
.vfc-remove{
  font-family:var(--vfc-heading);
  font-weight:800;
  border-radius:0;
  cursor:pointer;
  background:transparent;
  color:var(--vfc-text);
  border:2px solid var(--vfc-text);
}

.vfc-side{ font-size:13px; padding:8px 16px; }
.vfc-side[aria-selected="true"]{ background:var(--vfc-accent); border-color:var(--vfc-accent); color:var(--vfc-on-accent); }

.vfc-stage-tools{ display:flex; gap:8px; }
.vfc-icon{ width:36px; height:36px; font-size:16px; line-height:1; display:grid; place-items:center; }
.vfc-icon[disabled]{ opacity:.35; cursor:not-allowed; }
.vfc-icon:not([disabled]):hover{ border-color:var(--vfc-accent); color:var(--vfc-accent-700); }

/* --------------------------------------------------------------- panel */

.vfc-panel{ min-width:0; }

.vfc-kicker{
  font-family:var(--vfc-heading); font-weight:800;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--vfc-accent-700); margin:0 0 6px;
}

.vfc-title{
  font-family:var(--vfc-heading); font-weight:800;
  font-size:clamp(26px,3.4vw,40px); line-height:1.02;
  letter-spacing:-.02em; margin:0 0 24px;
}

.vfc-module{ border-top:2px solid var(--vfc-line); padding:18px 0; }

.vfc-module-title{
  font-family:var(--vfc-heading); font-weight:800;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  margin:0 0 12px;
}

.vfc-thumbs{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.vfc-thumb{ flex:0 0 64px; width:64px; height:64px; padding:4px; background:var(--vfc-surface); border-color:var(--vfc-line); }
.vfc-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.vfc-thumb.is-on{ border-color:var(--vfc-accent); }

.vfc-swatches{ display:flex; flex-wrap:wrap; gap:8px; }
.vfc-swatch{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border-color:var(--vfc-line); font-size:13px; }
.vfc-swatch span{ width:20px; height:20px; display:block; border:1px solid var(--vfc-line); }
.vfc-swatch em{ font-style:normal; }
.vfc-swatch.is-on{ border-color:var(--vfc-accent); }

.vfc-sizes{ display:flex; flex-wrap:wrap; gap:8px; }
.vfc-size{ min-width:52px; padding:10px 12px; font-size:13px; border-color:var(--vfc-line); }
.vfc-size.is-on{ background:var(--vfc-accent); border-color:var(--vfc-accent); color:var(--vfc-on-accent); }
.vfc-size.is-out{ opacity:.35; cursor:not-allowed; text-decoration:line-through; }

.vfc-adds{ display:flex; flex-wrap:wrap; gap:8px; }
.vfc-add{ padding:10px 14px; font-size:13px; border-color:var(--vfc-line); display:inline-flex; align-items:baseline; gap:6px; }
.vfc-add:hover{ border-color:var(--vfc-accent); }
.vfc-add small{ font-weight:400; font-size:11px; color:var(--vfc-accent-700); }

.vfc-layers{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:6px; }
.vfc-layer{
  display:flex; align-items:center; gap:10px;
  border:2px solid var(--vfc-line); padding:8px 10px;
  font-size:13px; cursor:pointer; background:transparent; width:100%; text-align:left;
  font-family:var(--vfc-body); color:var(--vfc-text);
}
.vfc-layer.is-on{ border-color:var(--vfc-accent); }
.vfc-layer b{ font-family:var(--vfc-heading); font-weight:800; font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.vfc-layer i{ font-style:normal; margin-left:auto; color:var(--vfc-accent-700); font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.vfc-empty{ font-size:13px; opacity:.75; }

.vfc-inspector{ margin-top:14px; border:2px solid var(--vfc-line); padding:14px; display:grid; gap:12px; }
.vfc-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.vfc-field{ display:grid; gap:6px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-family:var(--vfc-heading); font-weight:800; }

.vfc-input{
  font-family:var(--vfc-body); font-weight:400; font-size:15px; letter-spacing:0; text-transform:none;
  color:var(--vfc-text); background:var(--vfc-bg);
  border:2px solid var(--vfc-text); border-radius:0; padding:10px 12px; width:100%;
}
.vfc-range{ width:100%; accent-color:var(--vfc-accent); }

.vfc-inks{ display:flex; gap:6px; }
.vfc-ink{ width:28px; height:28px; border:2px solid var(--vfc-line); border-radius:0; cursor:pointer; padding:0; }
.vfc-ink.is-on{ border-color:var(--vfc-text); box-shadow:inset 0 0 0 2px var(--vfc-bg); }

.vfc-remove{ border-color:var(--vfc-line); padding:8px 12px; font-size:12px; justify-self:start; }
.vfc-remove:hover{ border-color:#8b2f2f; color:#8b2f2f; }

.vfc-qty{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.vfc-step{ width:40px; height:40px; font-size:18px; line-height:1; border-color:var(--vfc-line); }
.vfc-qty-input{ width:84px; text-align:center; }
.vfc-tier{
  font-family:var(--vfc-heading); font-weight:800; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase;
  background:var(--vfc-accent); color:var(--vfc-on-accent); padding:6px 10px;
}

.vfc-checkout{ border-top:2px solid var(--vfc-line); padding-top:18px; display:grid; gap:12px; }
.vfc-prices{ display:flex; justify-content:space-between; gap:16px; font-size:13px; }
.vfc-prices b{ font-family:var(--vfc-heading); font-weight:800; font-size:18px; }
.vfc-total b{ color:var(--vfc-accent-700); }

.vfc-cta{
  background:var(--vfc-accent); border-color:var(--vfc-accent); color:var(--vfc-on-accent);
  padding:16px 22px; font-size:15px; width:100%;
}
.vfc-cta:hover{ background:var(--vfc-accent-600); border-color:var(--vfc-accent-600); }
.vfc-cta[disabled]{ opacity:.5; cursor:not-allowed; }

.vfc-note{ margin:0; font-size:13px; min-height:1.4em; color:var(--vfc-accent-700); }
.vfc-note[data-error]{ color:#8b2f2f; }

/* The storefront launcher brings no CSS of its own: it wears the theme's
   .btn .btn-secondary, and its single spacing rule is printed inline by
   vfc_panel_launcher() so the front page loads none of this file. */

.vfc-embed{ margin:clamp(40px,6vw,88px) 0 0; }

/* --------------------------------------------------------------- misc */

.vfc :focus-visible{ outline:2px solid var(--vfc-accent); outline-offset:2px; }

@media (prefers-reduced-motion:reduce){
  .vfc *{ transition:none !important; animation:none !important; }
}

.vfc-icon svg{ display:block; }

/* ------------------------------------------------------------ own page */

/*
 * The full-width template imposes no measure at all — that is the point of it
 * — so the plugin supplies its own here rather than leaning on the theme.
 */
.vfc-page{
  max-width:var(--maxw,1280px);
  margin:0 auto;
  padding:clamp(90px,11vw,150px) var(--edge,clamp(20px,5vw,72px)) clamp(72px,9vw,120px);
}

.vfc-page-title{
  font-family:var(--font-heading,"Archivo",system-ui,sans-serif);
  font-weight:800;
  font-size:clamp(34px,5vw,64px);
  line-height:1;
  letter-spacing:-.02em;
  margin:0 0 clamp(28px,4vw,48px);
  color:var(--color-text,#201e1d);
}

/* The font list is a specimen sheet: every option is set in its own face. */
.vfc-font-select option{ font-size:15px; }
.vfc-layer span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:14ch; }