/* artword - product-page editor.
   Deliberately close to artsign's sheet so the two personalisers feel like one shop, minus
   everything that existed only to host a WebGL canvas. */

.artword-grid { display: grid; grid-template-columns: 1.35fr 1fr; min-height: 60vh; }

.artword-preview-wrap {
  position: relative; background: #edecea; display: flex; align-items: center;
  justify-content: center; min-height: 320px; overflow: hidden;
}
/* ONE VIEW, drawn at its own proportions. This used to be a filmstrip sized
   `(frames * 100%) 100%`, and with the browser assuming five frames against a one-frame image
   the picture was stretched to five times its width and squeezed to the box height - the
   "squished from side to side" the operator saw. `contain` never distorts, whatever comes back. */
.artword-stage {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  cursor: grab; touch-action: none;          /* we handle the gestures */
}
.artword-stage.is-dragging { cursor: grabbing; }
.artword-stage img {
  max-width: 100%; max-height: 100%; display: block;
  transform-origin: 0 0; will-change: transform; user-select: none; -webkit-user-drag: none;
}
/* the WebGL canvas fills the stage; OrbitControls handles turn and zoom */
#artword-viewer { position: absolute; inset: 0; }
#artword-viewer canvas { display: block; width: 100% !important; height: 100% !important; }

.artword-dims {
  position: absolute; left: 12px; bottom: 10px; font-size: .8rem; color: #5b5b5b;
  background: rgba(255,255,255,.8); padding: 2px 8px; border-radius: 10px;
}
.artword-hint {
  position: absolute; right: 12px; bottom: 10px; font-size: .78rem; color: #6b6b6b;
  background: rgba(255,255,255,.75); padding: 2px 8px; border-radius: 10px; pointer-events: none;
}

.artword-wait {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(240,239,237,.72); z-index: 3;      /* above the zoom controls */
}
.artword-wait.is-on { display: flex; }
.artword-wait-box { text-align: center; }
.artword-spin {
  width: 30px; height: 30px; margin: 0 auto 8px; border-radius: 50%;
  border: 3px solid #cfcdc9; border-top-color: #7a7a7a; animation: artword-spin .8s linear infinite;
}
@keyframes artword-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. PORTED from artsign, INCLUDING ITS FILE POSITION: this
   block must come AFTER the base .artword-preview-wrap rule or (equal specificity, later
   wins) position:relative and min-height:320px silently beat sticky and the 42vh cap - which
   is exactly how it was broken on 2026-08-05. */
@media (max-width: 991.98px) {
  .artword-grid { grid-template-columns: 1fr; }
  .artword-preview-wrap { position: sticky; top: 0; z-index: 2; min-height: 200px; max-height: 42vh; }
  .artword-stage img { max-height: 38vh; }
  .artword-controls { border-left: 0; max-height: none; }
}
.artword-wait-note { font-size: .82rem; color: #555; }

.artword-controls { max-height: 78vh; overflow-y: auto; }
.artword-label { display: block; font-weight: 600; font-size: .86rem; margin-bottom: .3rem; }

/* 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. */
.artword-dd { position: relative; }
.artword-dd-btn { width: 100%; text-align: left; font-size: 1.25rem; line-height: 1.5;
  min-height: 46px; background-image: none; padding-right: 2rem; position: relative; }
.artword-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); }
.artword-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); }
.artword-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; }
.artword-dd-opt:hover { background: #f5f1e8; }
.artword-dd-opt.selected { background: #ece4d6; }

.artword-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
@media (max-width: 400px) { .artword-tiles { grid-template-columns: repeat(2, 1fr); } }
.artword-tile {
  border: 1px solid #d8d5d0; background: #fff; border-radius: .5rem; padding: .45rem .3rem;
  text-align: center; cursor: pointer; line-height: 1.15;
}
.artword-tile.is-on { border-color: #111; box-shadow: inset 0 0 0 1px #111; }
.artword-tile.is-off { opacity: .45; cursor: not-allowed; }
.artword-tile-t { display: block; font-weight: 600; font-size: .9rem; }
.artword-tile-s { display: block; font-size: .68rem; color: #777; }
.artword-tile-p { display: block; font-size: .74rem; font-weight: 600; }

.artword-modes { display: grid; gap: .4rem; }
.artword-mode {
  border: 1px solid #d8d5d0; background: #fff; border-radius: .5rem; padding: .5rem .6rem;
  text-align: left; cursor: pointer;
}
.artword-mode.is-on { border-color: #111; box-shadow: inset 0 0 0 1px #111; }
.artword-mode { position: relative; padding-right: 4.2rem; }
/* what this way of making it adds, against the cheapest one for the same design */
.artword-mode-p {
  position: absolute; right: .6rem; top: .5rem; font-size: .8rem; font-weight: 600;
  color: #1f7a3d; white-space: nowrap;
}
.artword-mode.is-on .artword-mode-p { color: #111; }
.artword-mode-t { display: block; font-weight: 600; font-size: .88rem; }
.artword-mode-s { display: block; font-size: .74rem; color: #777; line-height: 1.25; }

.artword-swatches { display: flex; flex-wrap: wrap; gap: .35rem; }
/* NO NAME UNDER THE SWATCH. The labels were absolutely positioned and ran into each other on
   the shorter colours (operator, 2026-08-05: "colors dont need to have written names as they
   overlap eachother"). The name is the tooltip and, for the one that is selected, the line
   underneath the row - which is the only one anybody needs to read. */
.artword-sw {
  width: 42px; height: 42px; border-radius: .45rem; border: 1px solid #cbc8c3; cursor: pointer;
  position: relative; padding: 0;
}
.artword-sw.is-on { box-shadow: 0 0 0 2px #111; }
/* a small corner dot marks a colour that costs more, instead of "+8%" printed on the swatch */
.artword-sw.is-extra::after {
  content: ''; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px;
  border-radius: 50%; background: #d9a441; box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}
.artword-sw-picked { font-size: .78rem; color: #555; margin-top: .35rem; }

.artword-check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; cursor: pointer; }
.artword-check.is-off { opacity: .55; cursor: not-allowed; }
.artword-hangernote { margin-top: .2rem; line-height: 1.3; }

.artword-msg { font-size: .8rem; margin-top: .5rem; line-height: 1.35; }
.artword-msg.is-warn { color: #8a5a00; background: #fff6e5; border-radius: .4rem; padding: .4rem .6rem; }
.artword-warn { font-size: .78rem; color: #8a5a00; margin-top: .3rem; }

.artword-priceline { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05rem; }
.artword-priceline strong { font-size: 1.5rem; }
.artword-was { color: #999; font-size: .95rem; font-weight: 400; margin-right: .3rem; }
.artword-promo { color: #1f7a3d; font-weight: 600; }
.artword-breakdown { margin-top: .4rem; border-top: 1px dashed #ddd; padding-top: .35rem; }
.artword-bd-row { display: flex; justify-content: space-between; font-size: .78rem; color: #666; }
.artword-delivery { margin-top: .35rem; color: #555; }

/* saved list on the product page - a CARD with the picture, like artsign's. A row of text told
   the customer nothing about what they had just approved (operator, 2026-08-05: "Вашите
   надписи (1) has no preview"). */
.artword-designs { margin-top: .6rem; }
.artword-saved-t { font-weight: 600; font-size: .88rem; margin-bottom: .35rem; }
.artword-design {
  display: flex; gap: .6rem; align-items: flex-start; padding: .5rem;
  background: #f6f5f3; border-radius: .45rem; margin-bottom: .4rem;
}
.artword-design.editing { box-shadow: inset 0 0 0 2px #111; }
.artword-design img {
  width: 108px; height: 68px; object-fit: contain; background: #edecea; border-radius: .3rem;
  flex: 0 0 auto;
}
.artword-design-info { flex: 1 1 auto; min-width: 0; }
.artword-design-info .ttl {
  font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.artword-design-info .sub { font-size: .76rem; color: #777; }
.artword-design-btns { margin-top: .35rem; display: flex; gap: .35rem; }

/* ---------------------------------------------------------------- native UI on bound pages
   Everything the module replaces. Served on artword products alone, so nothing else in the
   shop is affected.

   The customisation block is the one that cost artsign three attempts: it is NOT the theme's,
   it is the third-party `wkcustomizationtocart` module rendering a shop-wide product override,
   which is why hiding the theme classes changed nothing (changelog §10.634). Both sets are
   listed here so it cannot come back either way. */
.artword-bound .product__customization,
.artword-bound .product-customization,
.artword-bound .js-product-customization,
.artword-bound .wk-product-customization,
.artword-bound .wk-js-product-customization,
.artword-bound #wkCustomizationBoxTex,
.artword-bound #wkCustomizationBoxMessage,
/* the width is chosen in the editor - leaving the native picker live would let a customer
   contradict their own saved design */
.artword-bound .product-variants,
/* The QUANTITY SPINNER goes: every design is its own cart line, added by our own button, so a
   "how many" box means nothing here.

   NOT `.product-quantity` - the theme renders displayProductActions INSIDE it, so hiding that
   container takes this module's own "Създайте своя надпис" button with it (operator,
   2026-08-05: "i dont see the button on the product page now"). Only the spinner itself goes.

   AVAILABILITY STAYS VISIBLE. It was hidden here for a moment and should not have been: it
   feeds the rich-snippet markup Google reads off the product page, and a made-to-order product
   that says nothing about availability loses that (operator, 2026-08-05). */
.artword-bound .product__quantity,
.artword-bound .quantity-button,
.artword-bound .js-quantity-button,
.artword-bound .product-actions__quantity { display: none !important; }

/* The native add-to-cart is HIDDEN, not hijacked. Intercepting its click left one stray path -
   a theme handler bound first, a JS error, a keyboard submit - that added the product on its
   DEFAULT combination with no personalisation at all (artsign, changelog §10.633). */
.artword-bound [data-button-action="add-to-cart"],
.artword-actions ~ #add-to-cart-or-refresh [data-button-action="add-to-cart"] { display: none !important; }

.artword-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: artword-spin .7s linear infinite;
}