/* =========================================================
   Pin Designer — section layout & skin (v0.6.7 redesign).
   ---------------------------------------------------------
   Everything is scoped under #cropperWrapper (same
   specificity as cropper.css) and loads AFTER it, so these
   rules win ties. Tune sizes/spacing via the --pd-* tokens.
   Grid: 220px | 1fr | 300px on desktop.
     row 1: product | canvas | preview
     row 2: design options   (middle column only)
     row 3: footer           (middle column only)
     pdfSection spans the full width when shown.
   Breakpoints:
     >=1200px full grid · 992–1199px product banner on top
     <992px   single column stack
   ========================================================= */

.pd-designer-wrap {
  --pd-accent:      #27BAAF;
  --pd-accent-dark: #1d9a91;
  --pd-danger:      #e5484d;
  --pd-ink:         #23272b;
  --pd-ink-soft:    #6b7280;
  --pd-line:        #e3e7eb;
  --pd-line-strong: #cfd6dc;
  --pd-bg:          #f4f6f8;
  --pd-card:        #ffffff;
  --pd-radius:      12px;
  --pd-radius-sm:   8px;
  --pd-shadow:      0 1px 2px rgba(20,24,28,.06), 0 4px 14px rgba(20,24,28,.05);
}

/* ---------- base skin for the whole shortcode output ---------- */
#cropperWrapper {
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--pd-ink);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
#cropperWrapper input,
#cropperWrapper textarea,
#cropperWrapper select {
  font-family: inherit;
}
#cropperWrapper .pd-designer-heading { font-family: inherit; }

/* ---------- product chooser bar: white, selectors fill the row ---------- */
#cropperWrapper .chooseGoodsWrapper {
  background-color: #fff;
  border: 1px solid var(--pd-line);
  border-radius: 10px;
  box-shadow: var(--pd-shadow);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding: 12px 18px;
  max-width: 1280px;
  margin: 0 auto;
}
#cropperWrapper .chooseProductWrapper {
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  padding-left: 0;
  color: var(--pd-ink);
  font-size: 16px;
  min-width: 0;
}
#cropperWrapper .chooseProductWrapper label { color: var(--pd-ink); white-space: nowrap; }
#cropperWrapper .chooseProductWrapper .selectWrapper { flex: 1 1 auto; min-width: 0; padding: 0; }
/* bootstrap-select.min.css hardcodes .bootstrap-select { width: 220px }
   (via a :not() chain) and the JS writes an inline px width — fight both */
#cropperWrapper .chooseProductWrapper .bootstrap-select,
#cropperWrapper .chooseGoodsWrapper .bootstrap-select {
  width: 100% !important;
  max-width: 100%;
}
#cropperWrapper .chooseProductWrapper .dropdown-toggle {
  width: 100%;
  background-color: #fff;
  border: 1px solid var(--pd-line-strong);
  color: var(--pd-ink);
  font-size: 16px;
}
/* long product names degrade with an ellipsis instead of clipping */
#cropperWrapper .chooseProductWrapper .dropdown-toggle .filter-option {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#cropperWrapper .chooseProductWrapper .dropdown-menu {
  border-color: var(--pd-line-strong);
  border-width: 1px;
}

/* =========================================================
   Spectrum color picker — appended to <body>, OUTSIDE
   #cropperWrapper, so it inherits the theme font (Times).
   Global selector is intentional and safe: spectrum is only
   used by this plugin.
   ========================================================= */
.sp-container,
.sp-container button,
.sp-container .sp-input {
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
}

/* =========================================================
   THE GRID
   ========================================================= */
#cropperWrapper .cropperBody { padding: 16px 0 22px; }
#cropperWrapper .pd-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: stretch;
  max-width: 1280px;
  margin: 0 auto;
}
/* grid items must be allowed to shrink below their min-content width —
   otherwise a fixed-px child (fabric's .canvas-container) blows the track
   wider than the phone viewport and every card overflows */
#cropperWrapper .pd-grid > * { min-width: 0; }
#cropperWrapper .pd-stage { display: contents; }

/* generic card */
#cropperWrapper .pd-card {
  background: var(--pd-card);
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius);
  box-shadow: var(--pd-shadow);
}
#cropperWrapper .pd-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--pd-line);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pd-ink-soft);
}
#cropperWrapper .pd-card__head i { color: var(--pd-accent); font-size: 13px; }
#cropperWrapper .pd-card__head--right { margin-left: auto; }

/* =========================================================
   ROW 1a — selected product card
   head bar → name → description → image (rounded 10px)
   ========================================================= */
#cropperWrapper .pd-product {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#cropperWrapper .pd-product__meta {
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--pd-line);
  text-align: left;
}
#cropperWrapper .pd-product__name { font-weight: 700; font-size: 17px; line-height: 1.25; }
#cropperWrapper .pd-product__description {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--pd-ink-soft);
}
#cropperWrapper .pd-product__img {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 14px;
  background: radial-gradient(circle at 50% 38%, #ffffff 0%, #f2f4f6 78%);
}
#cropperWrapper .pd-product__img img {
  width: auto; height: auto;
  max-width: 100%; max-height: 170px;
  border-radius: 10px;
  filter: drop-shadow(0 6px 10px rgba(20,24,28,.18));
}

/* =========================================================
   ROW 1b — canvas panel
   ========================================================= */
#cropperWrapper .pd-canvas-panel {
  display: flex;
  flex-direction: column;
  position: relative;              /* positioning context for the engine modals */
  overflow: visible !important;    /* override cropperCanvasCol overflow:hidden */
  background-color: var(--pd-card) !important;
  box-shadow: var(--pd-shadow) !important;
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius);
  padding-bottom: 0 !important;
}
#cropperWrapper .pd-canvas-panel__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--pd-line);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pd-ink-soft);
}
#cropperWrapper .pd-canvas-panel__head i { color: var(--pd-accent); font-size: 13px; }

/* ---------- orientation toggle (rect products only) ---------- */
#cropperWrapper .pd-rotate-btn {
  display: none;                    /* shown via .is-visible (editor.js) */
  width: max-content;
  margin: 10px auto 0;
  align-items: center;
  gap: 7px;
  padding: 5px 16px;
  border: 1px solid var(--pd-line-strong);
  border-radius: 999px;
  background: #fff;
  color: #444b52;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
#cropperWrapper .pd-rotate-btn.is-visible { display: flex; }
#cropperWrapper .pd-rotate-btn:hover {
  border-color: var(--pd-accent);
  color: var(--pd-accent-dark);
  background: #f4fbfa;
}
/* ELIMINAR TODO lives in the panel head now (cropper.css pins it
   absolute to the column corner — undo that here) */
#cropperWrapper .pd-canvas-panel__head .removeAllButton {
  position: static;
  opacity: 1;
  margin-left: auto;
  padding: 6px 10px;
  font-size: 11px;
}

/* canvas element — square, as wide as the panel allows */
#cropperWrapper #canvas-wrap {
  visibility: visible;
  float: none;
  width: min(100% - 32px, 600px);
  max-width: 100%;
  height: auto;
  min-height: 0;
  margin: 16px auto;
  aspect-ratio: 1 / 1;
}
/* fabric sets an inline px width on its wrapper at init — cap it so a
   resize/orientation change can never push the layout wider */
#cropperWrapper .canvas-container { max-width: 100%; }
#cropperWrapper #canvas-wrap .canvas-shadow { display: block; }
#cropperWrapper #canvas {
  width: 100%;
  height: 100%;
  background: #fff;
  display: block;
}

/* ---------- object tools strip (HERRAMIENTAS) ----------
   Engine shows/hides .ds-tool-settings on selection; we only
   restyle it into a tidy strip docked under the canvas. */
#cropperWrapper .basicTools.pd-object-tools {
  float: none;
  max-width: none;
  margin: 0;
  padding: 10px 12px 12px;
  border: none;
  border-top: 1px solid var(--pd-line);
  border-radius: 0 0 var(--pd-radius) var(--pd-radius);
  background: #fcfcfd;
  text-align: left;
  z-index: auto;
}
#cropperWrapper .basicTools .basicToolsHeader,
#cropperWrapper .basicTools .toolItemHeader { display: none; }
#cropperWrapper .basicTools .basicToolsItems {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
#cropperWrapper .basicTools .toolItem { display: inline-flex; margin: 0; }
#cropperWrapper .basicTools .buttonGroup {
  display: inline-flex;
  border: 1px solid var(--pd-line-strong);
  border-radius: var(--pd-radius-sm);
  overflow: hidden;
  background: #fff;
}
#cropperWrapper .basicTools .secondaryButton.ds-tool-button,
#cropperWrapper .basicTools .secondaryButton {
  width: 34px;
  height: 32px;
  min-width: 34px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #444b52;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  float: none;
}
#cropperWrapper .basicTools .buttonGroup > * + * { border-left: 1px solid var(--pd-line); }
#cropperWrapper .basicTools .secondaryButton:hover { background: #eef6f5; color: var(--pd-accent-dark); }
#cropperWrapper .basicTools .removeIcon { color: inherit; }
#cropperWrapper .pd-tool-label {
  align-self: center;
  margin-right: 4px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--pd-ink-soft);
  white-space: nowrap;
}

/* name-list selector: a normal block under the tools strip */
#cropperWrapper .nameListSelectWrapper {
  position: static;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--pd-line);
}
#cropperWrapper .nameListSelectWrapper label { margin: 0; font-size: 14px; }
#cropperWrapper #nameListSelect { max-width: 260px; }

/* =========================================================
   ROW 1c — preview panel
   ========================================================= */
#cropperWrapper .pd-preview-panel {
  --pd-preview-max-h: 420px;   /* portrait boxes cap here, width derives */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* collapsible header (mobile collapses; desktop ignores the class) */
#cropperWrapper .pd-preview-toggle {
  appearance: none;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
#cropperWrapper .pd-preview-toggle .pd-preview-toggle__hint,
#cropperWrapper .pd-preview-toggle .pd-preview-toggle__chevron { display: none; }
#cropperWrapper .pd-preview {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 18px;
}
#cropperWrapper .pd-preview__box {
  position: relative;
  width: min(100%, 240px);
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(20,24,28,.16), 0 0 0 1px rgba(20,24,28,.06);
}
#cropperWrapper .pd-preview__box img { width: 100%; height: 100%; object-fit: contain; }
#cropperWrapper .pd-preview__note {
  padding: 10px 14px 14px;
  border-top: 1px solid var(--pd-line);
  text-align: center;
  font-size: 13.5px;
  color: var(--pd-ink-soft);
}
/* shape-aware preview (set by editor.js pdApplyShape).
   NOTE: must match cropper.css's double-ID specificity
   (#cropperWrapper #preview-image-wrap) or the engine's
   border-radius:50% / overlay ring win the cascade. */
#cropperWrapper #preview-image-wrap.pd-shape-square,
#cropperWrapper #preview-image-wrap.pd-shape-rect {
  border-radius: 0;
  height: auto;
}
#cropperWrapper #preview-image-wrap.pd-shape-square .previewImgOverlay,
#cropperWrapper #preview-image-wrap.pd-shape-rect .previewImgOverlay { display: none; }

/* =========================================================
   ROW 2 — design options (tabs + panels)
   Middle grid column only: exactly as wide as the canvas.
   ========================================================= */
#cropperWrapper .pd-options {
  grid-column: 2;
  display: flex;
  flex-direction: column;
}
#cropperWrapper .pd-options .buttonMenu.pd-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 14px 6px;
  border-bottom: 1px solid var(--pd-line);
  background: transparent;
}
/* Colored pill per tab (soft tint normally, solid + white when active) */
#cropperWrapper .pd-options .buttonMenuItem {
  flex: 1 0 auto;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 0;
  width: auto;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--pd-ink);
  white-space: nowrap;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
#cropperWrapper .pd-options .buttonMenuItem i { font-size: 14px; color: inherit; }
#cropperWrapper .pd-options .buttonMenuHeading { font-size: 15px; }
#cropperWrapper .pd-options #cropMenuBgColor      { background: #e3f6f4; }
#cropperWrapper .pd-options #cropMenuBgColor:hover   { background: #d2efec; }
#cropperWrapper .pd-options #cropMenuImage        { background: #e4f0fa; }
#cropperWrapper .pd-options #cropMenuImage:hover     { background: #d3e7f6; }
#cropperWrapper .pd-options #cropMenuText         { background: #f1e9f6; }
#cropperWrapper .pd-options #cropMenuText:hover      { background: #e7dbef; }
#cropperWrapper .pd-options #cropMenuFaq          { background: #fbeedb; }
#cropperWrapper .pd-options #cropMenuFaq:hover       { background: #f8e2c6; }
#cropperWrapper .pd-options #cropMenuBgColor.active,
#cropperWrapper .pd-options #cropMenuImage.active,
#cropperWrapper .pd-options #cropMenuText.active,
#cropperWrapper .pd-options #cropMenuFaq.active {
  color: #fff;
  box-shadow: 0 2px 8px rgba(20,24,28,.14);
}
#cropperWrapper .pd-options #cropMenuBgColor.active { background: var(--pd-accent); }
#cropperWrapper .pd-options #cropMenuImage.active   { background: #2f80c8; }
#cropperWrapper .pd-options #cropMenuText.active    { background: #8e5aa8; }
#cropperWrapper .pd-options #cropMenuFaq.active     { background: #e8912d; }

#cropperWrapper .pd-options .specificTools { padding: 18px 20px 20px; }
#cropperWrapper .pd-panel-text,
#cropperWrapper .specificToolText {
  margin: 0 0 14px;
  padding-bottom: 0;
  font-size: 14.5px;
  color: var(--pd-ink-soft);
  text-align: center;
}

/* ---------- buttons (engine .button.secondTypeBtn reskin) ---------- */
#cropperWrapper .button.secondTypeBtn,
#cropperWrapper .putIntoCart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 600;
  transition: filter .12s ease, background .12s ease, border-color .12s ease;
}
#cropperWrapper .button.secondTypeBtn {
  padding: 10px 18px;
  background: #fff;
  border: 1px solid var(--pd-line-strong);
  color: var(--pd-ink);
  font-size: 15px;
  line-height: 1.2;
}
#cropperWrapper .button.secondTypeBtn:hover { border-color: var(--pd-accent); color: var(--pd-accent-dark); background: #f4fbfa; filter: none; }
#cropperWrapper .secondTypeBtn--colorInverted {
  background: var(--pd-accent);
  border-color: var(--pd-accent);
  color: #fff;
}
#cropperWrapper .secondTypeBtn--colorInverted:hover { background: var(--pd-accent-dark); color: #fff; }

/* ---------- palette ---------- */
#cropperWrapper .color-box-buttons.pd-palette {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 560px;
  margin: 0 auto;
}
#cropperWrapper .color-box-buttons .colorBtn {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 8px;
  border: 1px solid rgba(20,24,28,.14);
  margin: 0;
  padding: 0;
  float: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .1s ease, box-shadow .1s ease;
}
#cropperWrapper .color-box-buttons .colorBtn:hover { transform: scale(1.08); box-shadow: 0 2px 8px rgba(20,24,28,.2); }

/* ---------- image / pdf panel ---------- */
#cropperWrapper .imageTools .hideWhenLoadImgModal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  text-align: center;
}
/* cropper.css offsets the URL button by 15px — kill it so both
   upload buttons sit on the same level */
#cropperWrapper .imageTools .chooseImgFromInternetBtn { margin-top: 0; }
#cropperWrapper .imageTools .hideWhenLoadImgModal .cropperHr,
#cropperWrapper .imageTools .hideWhenLoadImgModal .cropperSmallText { flex-basis: 100%; }
#cropperWrapper .imageTools .cropperHr {
  border: none;
  border-top: 1px solid var(--pd-line);
  margin: 10px 0;
}
#cropperWrapper .cropperSmallText { font-size: 14px; color: var(--pd-ink-soft); text-align: center; }

/* ---------- text panel (flat, compact — no boxes) ---------- */
#cropperWrapper .textTools > .button.secondTypeBtn { background: #e4f0fa; }
#cropperWrapper .textTools > .button.secondTypeBtn:hover { background: #d3e7f6; }
#cropperWrapper .textTools .ds-tool-settings {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 0;
}
#cropperWrapper .textTools .ds-tools-box.textSettingGroup {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}
#cropperWrapper .textTools .pd-field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
#cropperWrapper .textTools .pd-field-row > .bootstrap-select { flex: 1 1 auto; min-width: 0; }
#cropperWrapper .textTools .pd-text-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
}
#cropperWrapper .pd-color-label {
  align-self: center;
  margin-right: 4px;
  font-size: 13.5px;
  color: var(--pd-ink-soft);
}
#cropperWrapper .textSettingLabel {
  display: block;
  margin-bottom: 8px;
  padding: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--pd-ink-soft);
}
#cropperWrapper .ds-tool-text-content { width: 100%; resize: vertical; }
#cropperWrapper .radioButtonContainer { margin-right: 16px; }
#cropperWrapper .fontSizeWrapper { display: inline-flex; vertical-align: middle; }
#cropperWrapper .reverseTextWrapper { display: inline-flex; align-items: center; margin-left: 18px; }
#cropperWrapper .reverseTextWrapper .textSettingLabel--reverseText {
  display: inline-block;
  margin: 0 8px 0 0;
}

/* steppers (font size, letter spacing, qty) */
#cropperWrapper .decIncWrapper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--pd-line-strong);
  border-radius: var(--pd-radius-sm);
  overflow: hidden;
  background: #fff;
  padding: 0;
}
#cropperWrapper .decIncWrapper .decIncButton {
  width: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 0;
  float: none;
  cursor: pointer;
}
#cropperWrapper .decIncWrapper .decIncButton:hover { background: #eef6f5; color: var(--pd-accent-dark); }
#cropperWrapper .decIncWrapper input {
  width: 56px;
  border: none;
  border-left: 1px solid var(--pd-line);
  border-right: 1px solid var(--pd-line);
  border-radius: 0;
  text-align: center;
  -moz-appearance: textfield;
  height: auto;
}
#cropperWrapper .decIncWrapper input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ---------- faq ---------- */
#cropperWrapper .faqQuestion {
  max-width: 560px;
  margin: 0 auto;
  padding: 10px 0;
  border-bottom: 1px solid var(--pd-line);
  text-align: center;
}
#cropperWrapper .smallFaqDescription { font-size: 14px; }

/* =========================================================
   ROW 3 — footer: quantity · price · cart
   Also middle-column only (same width as canvas/options).
   ========================================================= */
#cropperWrapper .cropperFooter.pd-footer {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 14px 20px;
  background: var(--pd-card);
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius);
  box-shadow: var(--pd-shadow);
}
#cropperWrapper .productCountWrapper { display: flex; align-items: center; gap: 12px; margin: 0; }
#cropperWrapper .productCntLabel { font-size: 14.5px; font-weight: 600; color: var(--pd-ink-soft); }
#cropperWrapper .priceWrapper {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
  margin: 0;
}
#cropperWrapper .pricesPerPieceWrapper { text-align: right; }
#cropperWrapper .grossPricePerPiece { font-size: 14.5px; color: var(--pd-ink-soft); }
#cropperWrapper .savingDifferenceWrapper { font-size: 13px; color: #1d9a48; }
#cropperWrapper .grossTotalPrice { font-size: 26px; font-weight: 800; }
#cropperWrapper .putIntoCart {
  padding: 12px 30px;
  background: var(--pd-accent);
  color: #fff;
  font-size: 17px;
  border: none;
}
#cropperWrapper .putIntoCart:hover { background: var(--pd-accent-dark); }

/* =========================================================
   PDF section — full-width row of the grid when shown
   ========================================================= */
#cropperWrapper .pdfSection { grid-column: 1 / -1; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1199px) {
  #cropperWrapper .pd-grid { grid-template-columns: minmax(0, 1fr) 280px; }
  /* product becomes a slim horizontal banner above canvas+preview */
  #cropperWrapper .pd-product {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  #cropperWrapper .pd-product > .pd-card__head { flex-basis: 100%; }
  #cropperWrapper .pd-product__img { padding: 8px 6px 8px 14px; }
  #cropperWrapper .pd-product__img img { max-height: 84px; max-width: 110px; }
  #cropperWrapper .pd-product__meta {
    border-bottom: none;
    border-left: 1px solid var(--pd-line);
    text-align: left;
    margin-left: auto;
    padding-right: 18px;
  }
  /* options + footer span full width again at this size */
  #cropperWrapper .pd-options,
  #cropperWrapper .cropperFooter.pd-footer { grid-column: 1 / -1; }
  #cropperWrapper .pd-preview__box { width: min(100%, 190px); }
}

@media (max-width: 991px) {
  #cropperWrapper .pd-grid { grid-template-columns: 1fr; }
  /* ---- mobile typography: the app is used on phones ---- */
  #cropperWrapper { font-size: 18px; }
  #cropperWrapper .pd-card__head,
  #cropperWrapper .pd-canvas-panel__head { font-size: 15px; }
  #cropperWrapper .pd-options .buttonMenuHeading { font-size: 16px; }
  #cropperWrapper .pd-options .buttonMenuItem { padding: 10px 16px; }
  #cropperWrapper .button.secondTypeBtn { font-size: 16px; }
  #cropperWrapper .pd-panel-text,
  #cropperWrapper .specificToolText { font-size: 16px; }
  #cropperWrapper .textSettingLabel { font-size: 13.5px; }
  #cropperWrapper .ds-tool-text-content { font-size: 17px; }
  #cropperWrapper .primaryInput { font-size: 16px; }
  #cropperWrapper .cropperSmallText { font-size: 15px; }
  #cropperWrapper .faqQuestion h4 { font-size: 17px; }
  #cropperWrapper .smallFaqDescription { font-size: 15.5px; }
  #cropperWrapper .pd-preview__note { font-size: 15px; }
  #cropperWrapper .pd-rotate-btn { font-size: 15px; }
  #cropperWrapper .productCntLabel { font-size: 16px; }
  #cropperWrapper .grossPricePerPiece { font-size: 16px; }
  #cropperWrapper .grossTotalPrice { font-size: 28px; }
  #cropperWrapper .pd-preview-toggle .pd-preview-toggle__hint { font-size: 15px; }

  /* ---- chooser: cropper.css stacks these column-wise on mobile, which would
     turn our flex-basis (260px) into a 260px HEIGHT per group — force
     compact single-row fields instead ---- */
  #cropperWrapper .chooseGoodsWrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  #cropperWrapper .chooseProductWrapper { flex: 1 1 auto; flex-direction: row; font-size: 17px; }
  #cropperWrapper .chooseProductWrapper .dropdown-toggle { font-size: 17px; }

  /* ---- product card: stacked, image BELOW the text and bigger ---- */
  #cropperWrapper .pd-product {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;   /* banner rule leaves 'center' — it shrank the head bar */
  }
  #cropperWrapper .pd-product > .pd-card__head { flex-basis: auto; width: 100%; }
  #cropperWrapper .pd-product__meta {
    border-left: none;
    border-bottom: 1px solid var(--pd-line);
    margin-left: 0;
    padding: 12px 16px;
  }
  #cropperWrapper .pd-product__name { font-size: 18px; overflow-wrap: break-word; }
  #cropperWrapper .pd-product__description { font-size: 15px; overflow-wrap: break-word; }
  #cropperWrapper .pd-product__img { padding: 18px; }
  #cropperWrapper .pd-product__img img { max-height: 240px; max-width: 100%; }

  #cropperWrapper .pd-product { grid-column: auto; }
  #cropperWrapper .pd-options,
  #cropperWrapper .cropperFooter.pd-footer { grid-column: auto; }
  #cropperWrapper .pd-canvas-panel__head { flex-wrap: wrap; }
  #cropperWrapper .pd-preview-panel { --pd-preview-max-h: 320px; }
  #cropperWrapper .pd-preview { padding: 14px; }
  #cropperWrapper .pd-preview__box { width: min(60vw, 210px); }
  /* collapsed by default: header bar only, tap to expand */
  #cropperWrapper .pd-preview-panel:not(.pd-preview--open) .pd-preview,
  #cropperWrapper .pd-preview-panel:not(.pd-preview--open) .pd-preview__note { display: none; }
  #cropperWrapper .pd-preview-toggle .pd-preview-toggle__hint {
    display: inline;
    margin-left: auto;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--pd-ink-soft);
  }
  #cropperWrapper .pd-preview-toggle .pd-preview-toggle__chevron {
    display: inline;
    margin-left: 8px;
    transition: transform .15s ease;
  }
  #cropperWrapper .pd-preview-panel.pd-preview--open .pd-preview-toggle__hint { display: none; }
  #cropperWrapper .pd-preview-panel.pd-preview--open .pd-preview-toggle__chevron { transform: rotate(180deg); }
  #cropperWrapper .textTools .pd-text-cols { grid-template-columns: 1fr; }
  /* tabs stay one horizontal line on mobile (base rule); just tighten */
  #cropperWrapper .pd-options .buttonMenu.pd-tabs { gap: 6px; padding: 10px 10px 4px; }
  #cropperWrapper .pd-options .buttonMenuItem { padding: 8px 14px; }
  /* object tools: one line, no label, everything visible — tightened so
     the 9 buttons fit even on a 320px screen (no scrolling).
     NOTE: cropper.css forces .toolItem { width: 90px } — that, not the
     button size, was what pushed the row off-screen. */
  #cropperWrapper .basicTools.pd-object-tools { padding: 8px 6px; }
  #cropperWrapper .basicTools .pd-tool-label { display: none; }
  #cropperWrapper .basicTools .basicToolsItems {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 4px;
  }
  #cropperWrapper .basicTools .toolItem { width: auto; margin: 0; padding-top: 0; }
  #cropperWrapper .basicTools .toolItemHeader { padding-bottom: 0; }
  #cropperWrapper .basicTools .secondaryButton.ds-tool-button,
  #cropperWrapper .basicTools .secondaryButton { width: 28px; height: 28px; min-width: 28px; font-size: 11px; }
  #cropperWrapper .cropperFooter.pd-footer {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  #cropperWrapper .productCountWrapper { justify-content: center; }
  #cropperWrapper .priceWrapper { justify-content: center; text-align: center; flex-direction: column; gap: 4px; }
  #cropperWrapper .pricesPerPieceWrapper { text-align: center; }
  #cropperWrapper .putIntoCart { width: 100%; }
}

/* =========================================================
   Phones (≤767px) — after the ≤991 block so it wins ties.
   ========================================================= */
@media (max-width: 767px) {
  /* tabs: 4 equal cells, icon over label (mischapas style) — everything
     visible, no horizontal scrolling; labels may wrap to 2 lines.
     Per-tab tint colors + active states carry over from the base rules. */
  #cropperWrapper .pd-options .buttonMenu.pd-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    overflow: visible;
    padding: 10px 10px 6px;
  }
  #cropperWrapper .pd-options .buttonMenuItem {
    flex-direction: column;
    gap: 4px;
    padding: 8px 4px;
    text-align: center;
    white-space: normal;
    border-radius: 10px;   /* cells, not pills (pill base is 999px) */
  }
  #cropperWrapper .pd-options .buttonMenuItem i { font-size: 16px; }
  #cropperWrapper .pd-options .buttonMenuHeading { font-size: 14px; line-height: 1.15; }
}