/* artsign editor - layout mirrors artfab: preview left, options right. */
/* wider right column: ten colour swatches have to fit on ONE row (operator) */
.artsign-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; min-height: 62vh; }
.artsign-preview-wrap {
  position: relative; display: flex; align-items: center;
  justify-content: center; min-height: 320px; overflow: hidden;
  /* A MID-TONE backdrop. Cream was nearly the same value as white filament, so a white sign
     vanished into it; black would do the same to a black sign. Mid grey gives both something
     to read against. */
  background: radial-gradient(120% 90% at 50% 16%, #dfe3e7 0%, #b9c0c7 58%, #949ca4 100%);
}
#artsign-viewer { position: absolute; inset: 0; }
#artsign-viewer canvas { display: block; width: 100% !important; height: 100% !important; }
.artsign-preview-wrap img { max-width: 100%; max-height: 68vh; display: block; }
.artsign-hint {
  position: absolute; right: 12px; bottom: 10px; font-size: .72rem; color: #6d6154;
  background: rgba(255,255,255,.6); padding: .15rem .45rem; border-radius: .3rem;
  pointer-events: none; transition: opacity .4s;
}
.artsign-tiles-3 { grid-template-columns: repeat(3, 1fr); }
.artsign-delivery { color: #35692f; margin-top: .25rem; }
.artsign-controls { border-left: 1px solid #e6e6e6; overflow-y: auto; max-height: 78vh; }
.artsign-label { display: block; font-weight: 600; font-size: .86rem; margin-bottom: .3rem; }
.artsign-letter { font-size: 1.6rem; text-align: center; font-weight: 700; max-width: 5rem; }

/* The SIZE tiles sit on ONE row (operator, 2026-08-03) - there are four sizes now that 10x10
   is back, and a 3-column grid wrapped the last one onto a line of its own. The decoration
   tiles keep their own 3-wide grid via .artsign-tiles-3. */
.artsign-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; }
#artsign-sizes .artsign-tile { padding: .4rem .2rem; }
#artsign-sizes .artsign-tile strong { font-size: .92rem; white-space: nowrap; }
#artsign-sizes .artsign-tile-sub { font-size: .68rem; white-space: nowrap; }
.artsign-tile {
  border: 1px solid #d5d5d5; background: #fff; border-radius: .4rem; padding: .45rem .3rem;
  font-size: .85rem; cursor: pointer; text-align: center;
}
.artsign-tile.active { border-color: #2059c8; box-shadow: 0 0 0 2px rgba(32,89,200,.18); font-weight: 600; }

.artsign-swatches { display: flex; flex-wrap: wrap; gap: .28rem; }
.artsign-sw {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; border: 2px solid #ccc;
  cursor: pointer; padding: 0;
}
.artsign-sw.active { border-color: #111; box-shadow: 0 0 0 2px rgba(0,0,0,.15); }
.artsign-sw[data-multi] { background: linear-gradient(90deg,#D23B31,#E8801E,#E9C31F,#2D9C50,#2059C8,#8E44AD); }

.artsign-priceline { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05rem; }
.artsign-priceline strong { font-size: 1.5rem; }
.artsign-warn, .artsign-msg { font-size: .82rem; margin-top: .4rem; }
.artsign-msg:not(:empty) {
  background: #fff8e1; border: 1px solid #f0d98a; border-radius: .35rem;
  padding: .35rem .5rem; color: #7a5b00;
}
.artsign-msg.err:not(:empty) { background: #fdeceb; border-color: #f0b3ae; color: #a12118; }
.artsign-warn { color: #9a6b00; }
.artsign-msg.err { color: #b3261e; }

.artsign-dims {
  /* §10.861 - the REAL dimensions are the honest size statement (the size picker is only
     the longer side), so the bubble reads at a glance: ~2x the old size (operator:
     "2.5 is too much"). */
  position: absolute; left: 12px; bottom: 10px; color: #4a4034; font-size: .95rem;
  font-weight: 600; background: rgba(255,255,255,.8); padding: .35rem .65rem;
  border-radius: .4rem; box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.artsign-wait { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
.artsign-wait.on { display: flex; }
.artsign-spin {
  width: 34px; height: 34px; border: 3px solid rgba(0,0,0,.15);
  border-top-color: #4a4034; border-radius: 50%; animation: artsign-spin .8s linear infinite;
}
@keyframes artsign-spin { to { transform: rotate(360deg); } }

/* Mobile: preview ON TOP and sticky, controls scroll beneath - the keyboard must never
   cover the thing the customer is judging. */
@media (max-width: 991.98px) {
  .artsign-grid { grid-template-columns: 1fr; }
  .artsign-preview-wrap { position: sticky; top: 0; z-index: 2; min-height: 200px; max-height: 42vh; }
  .artsign-preview-wrap img { max-height: 38vh; }
  .artsign-controls { border-left: 0; max-height: none; }
}

/* Saved designs strip on the product page - artfab's flow: design, save, design again,
   then ONE add-to-cart sends them all. */
.artsign-designs { display: flex; flex-direction: column; gap: .45rem; margin-top: .75rem; }
.artsign-design {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  border: 1px solid #ddd; border-radius: .5rem; padding: .4rem .6rem .4rem .4rem;
  background: #faf8f4;
}
.artsign-design.editing { border-color: #2059c8; box-shadow: 0 0 0 2px rgba(32,89,200,.15); }
.artsign-design img { width: 88px; flex: 0 0 88px; border-radius: .3rem; display: block; }
.artsign-design-info { flex: 1 1 auto; min-width: 0; }
.artsign-design-info .ttl { font-weight: 600; font-size: .9rem; }
.artsign-design-info .sub { font-size: .78rem; color: #666; margin-bottom: .3rem; }
.artsign-design-btns { display: flex; gap: .35rem; }
.artsign-designs-title { font-weight: 600; font-size: .86rem; width: 100%; margin-bottom: -.2rem; }

/* The size selector is chosen INSIDE the editor, so the native attribute picker on the
   product page is noise - and worse, it lets a customer pick a size that disagrees with the
   design they saved. The combination still exists (it carries the per-size price); only its
   UI is hidden, and the module always posts the size explicitly. */
.artsign-bound .product__variants,
.artsign-bound .js-product-variants,
.artsign-bound .product-variant,
.artsign-bound .product-variants { display: none !important; }

/* THE QUANTITY SPINNER TOO. Every design is its own cart line added by artsign's own button, so
   a "how many" box does nothing but confuse - it was still on screen here while artword had
   already lost it (operator, 2026-08-05). NOT `.product-quantity`: the theme renders
   displayProductActions inside that container, so hiding it takes our own button with it.
   Availability is deliberately left visible - it feeds the rich-snippet markup. */
.artsign-bound .product__quantity,
.artsign-bound .quantity-button,
.artsign-bound .js-quantity-button,
.artsign-bound .product-actions__quantity { display: none !important; }

/* Буква + Име on one row: the letter needs only a few characters of width, the name needs
   the rest, and together they stay above the fold on a phone. */
.artsign-row { display: flex; gap: .6rem; align-items: flex-start; }
.artsign-col-letter { flex: 0 0 5.2rem; }
.artsign-col-name { flex: 1 1 auto; min-width: 0; }

/* Decoration buttons carry a thumbnail of the set's own shape - there was plenty of room in
   them and a label alone made every set look the same. */
.artsign-tile-deco { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
/* Black, not the brand blue: the drawing is what is being chosen here, and colouring it blue
   read as a selected state and fought the swatches next to it (operator). */
.artsign-tile-icon { display: block; width: 30px; height: 30px; color: #1c1c1c; }
.artsign-tile-icon svg { width: 100%; height: 100%; display: block; }
.artsign-tile.active .artsign-tile-icon { color: #000; }
/* "Без декорация" has no drawing above it, so its label sat at the top of a tile sized for
   icon + label. Centre it in the space instead (operator). */
.artsign-tile-deco { justify-content: center; min-height: 62px; }
.artsign-tile-label { font-size: .76rem; line-height: 1.1; }

/* Launch promotion: the old price struck through, the payable one in the ORIGINAL colour -
   recolouring the price itself was not wanted (operator). */
.artsign-was { color: #8a8a8a; font-weight: 400; margin-right: .35rem; }
.artsign-now { color: inherit; }
.artsign-promo { color: #d23b31; font-weight: 600; margin-top: .15rem; }

/* The wait: spinner with an estimate and a running count under it. A bare spinner on a
   seven-second generation reads as a hang. */
.artsign-wait-box { display: flex; flex-direction: column; align-items: center; gap: .6rem;
  background: rgba(255,255,255,.88); border-radius: .5rem; padding: 1rem 1.25rem; }
.artsign-wait-note { font-size: .875rem; color: #4a4034; font-variant-numeric: tabular-nums;
  text-align: center; }

/* Wall-mount opt-in */
.artsign-check { display: flex; align-items: center; gap: .5rem; cursor: pointer;
  font-size: .95rem; }
.artsign-check input { width: 1.05rem; height: 1.05rem; margin: 0; }
.artsign-hangernote { margin-top: .25rem; line-height: 1.35; }

/* size tile: the thickness under the dimensions */
.artsign-tile-sub { display: block; font-size: .78rem; font-weight: 400; opacity: .7;
  margin-top: .15rem; }

/* The native customization block. artsign fills that field programmatically from the editor,
   so the theme's own "Персонализиране на продукт - въведете персонализацията в полетата..."
   panel is instructions for something the customer never touches - it leaked onto the product
   page under the editor (operator, 2026-08-03). Hidden, not removed: the FIELD still has to
   exist and still has to be posted, only its UI is redundant here. */
/* NOT scoped on a class that JavaScript has to add. This stylesheet is only ever served on a
   product artsign is bound to (see registerStylesheet, gated on liveFor), so everything in it
   is already scoped - and keying the rule on `.artsign-bound`, which artsign.js adds at the END
   of its setup, meant that any error earlier in that file left the theme's customization panel
   on screen (operator saw it twice). Now it cannot. */
.product__customization,
.product-customization,
.js-product-customization,
/* ...and the one that was ACTUALLY on screen. The block is not the theme's at all - it is the
   third-party `wkcustomizationtocart` module rendering its own product override, which is why
   hiding the theme's classes changed nothing however many times I tried (operator: "this is an
   option in the product and is for multiple products" - correct, it is installed shop-wide).
   Hidden here only, because this stylesheet is served on artsign products alone; every other
   customizable product keeps it. */
.wk-product-customization,
.wk-js-product-customization,
#wkCustomizationBoxTex,
#wkCustomizationBoxMessage { display: none !important; }

/* The native add-to-cart is HIDDEN, not hijacked. Intercepting its click meant one stray path -
   a theme handler bound before ours, a JS error, a keyboard submit - added the product on its
   DEFAULT combination with no personalisation, which is the stray "10x10 without
   personalization" line (operator, 2026-08-03). artsign renders its own button instead. */
.artsign-bound-hide-native [data-button-action="add-to-cart"],
.artsign-actions ~ #add-to-cart-or-refresh [data-button-action="add-to-cart"] { display: none; }

/* inline spinner for the save button */
.artsign-btn-spin { display: inline-block; width: .85em; height: .85em; margin-right: .5em;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%;
  vertical-align: -.1em; animation: artsign-spin .7s linear infinite; }

/* Font picker: an in-page list, not the browser's native one - on a phone that opens a
   full-screen system wheel in the system font, which defeats showing the faces at all. */
.artsign-dd { position: relative; }
.artsign-dd-btn { width: 100%; text-align: left; font-size: 1.25rem; line-height: 1.5;
  min-height: 46px; background-image: none; padding-right: 2rem; }
.artsign-dd-btn::after { content: ''; position: absolute; right: .9rem; top: 50%;
  width: .5rem; height: .5rem; margin-top: -.35rem; border-right: 2px solid #6b6357;
  border-bottom: 2px solid #6b6357; transform: rotate(45deg); }
.artsign-dd-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px);
  max-height: 58vh; overflow-y: auto; background: #fff; border: 1px solid #d9d2c6;
  border-radius: .4rem; box-shadow: 0 8px 24px rgba(0,0,0,.16); }
.artsign-dd-opt { display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: .5rem .8rem; font-size: 1.45rem; line-height: 1.45; min-height: 50px;
  cursor: pointer; }
.artsign-dd-opt:hover { background: #f5f1e8; }
.artsign-dd-opt.selected { background: #ece4d6; }

/* Itemised price. The total moves when a colour or a decoration changes; these lines say why. */
.artsign-breakdown { margin-top: .3rem; font-size: .82rem; color: #6b6357; }
.artsign-bd-row { display: flex; justify-content: space-between; gap: 1rem; line-height: 1.5; }
.artsign-bd-row:first-child { color: #4a4034; }

/* wall mount unavailable at this size */
.artsign-check-off { opacity: .55; cursor: not-allowed; }
.artsign-check-off input { cursor: not-allowed; }