/* Custom Bandana Design Lab */
body[data-product="CUSTOM BANDANA"] .customCanvas .blankProduct {
  width: 86%;
  height: 88%;
  inset: 5% 7%;
  object-fit: contain;
}

/* The 22-inch option uses the larger presentation. */
body[data-product="CUSTOM BANDANA"][data-bandana-size="22"] .customCanvas .printBoundary {
  width: 74%;
  height: 76%;
  top: 11%;
  left: 13%;
}

body[data-product="CUSTOM BANDANA"][data-bandana-size="22"] .customCanvas .placedDesign {
  max-width: 74%;
  max-height: 76%;
}

/* The same approved image is intentionally shown a little smaller for 14 inches. */
body[data-product="CUSTOM BANDANA"][data-bandana-size="14"] .customCanvas .blankProduct {
  width: 68%;
  height: 70%;
  inset: 15% 16%;
}

body[data-product="CUSTOM BANDANA"][data-bandana-size="14"] .customCanvas .printBoundary {
  width: 58%;
  height: 60%;
  top: 20%;
  left: 21%;
}

body[data-product="CUSTOM BANDANA"][data-bandana-size="14"] .customCanvas .placedDesign {
  max-width: 58%;
  max-height: 60%;
}

body[data-product="CUSTOM BANDANA"] .customCanvas .placedDesign:has(> img) {
  aspect-ratio: 1 / 1;
  height: auto;
}

body[data-product="CUSTOM BANDANA"] .customCanvas .placedDesign > img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

body[data-product="CUSTOM BANDANA"] .customCanvas .printBoundary {
  box-sizing: border-box;
  border: 2px dotted rgba(185, 255, 60, 0.8);
}

body[data-product="CUSTOM BANDANA"] .proofNote {
  max-width: 720px;
}

/* Separate material and size controls on the Bandana product page. */
.bandanaOptionSection + .bandanaOptionSection {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(119, 202, 255, 0.2);
}

.bandanaChoiceGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.bandanaChoiceGrid button {
  min-height: 52px;
  padding: 11px 14px;
  border: 1px solid #31536b;
  border-radius: 8px;
  background: #071420;
  color: #f5f7fb;
  font: inherit;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
}

.bandanaChoiceGrid button:hover,
.bandanaChoiceGrid button:focus-visible {
  border-color: #b9ff3c;
  outline: none;
}

.bandanaChoiceGrid button.active {
  border-color: #b9ff3c;
  color: #b9ff3c;
  box-shadow: 0 0 0 2px rgba(185, 255, 60, 0.2);
}

/* Clickable gallery directly beneath the main Bandana product image. */
.productBandanaGallery {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.productBandanaGallery button {
  width: 88px;
  height: 88px;
  padding: 4px;
  overflow: hidden;
  border: 2px solid #31536b;
  border-radius: 8px;
  background: #050c14;
  cursor: pointer;
}

.productBandanaGallery button:hover,
.productBandanaGallery button:focus-visible,
.productBandanaGallery button.active {
  border-color: #b9ff3c;
  outline: none;
  box-shadow: 0 0 0 2px rgba(185, 255, 60, 0.2);
}

.productBandanaGallery img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  object-fit: contain;
  object-position: center center;
}

/* Permanent product-image standard: center every product inside its preview. */
.productPhotoWrap {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  align-self: auto !important;
  justify-self: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
}

.productPhoto {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  object-position: center center;
  margin: 0 auto;
}

/*
 * A legacy runtime style forces both children of productPhotoWrap to relative
 * positioning. In the flex preview this makes the artwork layer occupy space
 * beside the photo, shrinking the photo from the right. These higher-specificity
 * rules restore the intended overlay and guarantee true geometric centering.
 */
body .stage > .productPhotoWrap > img.productPhoto {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  flex: none !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  transform: none !important;
}

body .stage > .productPhotoWrap > .design.productDesign {
  position: absolute !important;
  z-index: 2 !important;
  top: 31% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  width: 30% !important;
  height: 34% !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
}

/* Design Lab: material is chosen on the product page; Section 2 changes size only. */
.bandanaDesignSizeGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.bandanaDesignSizeGrid button {
  min-height: 58px;
  padding: 12px 16px;
  border: 1px solid #31536b;
  border-radius: 8px;
  background: #071420;
  color: #f5f7fb;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.bandanaDesignSizeGrid button:hover,
.bandanaDesignSizeGrid button:focus-visible,
.bandanaDesignSizeGrid button.active {
  border-color: #b9ff3c;
  color: #b9ff3c;
  outline: none;
  box-shadow: 0 0 0 2px rgba(185, 255, 60, 0.2);
}

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

  .productBandanaGallery button {
    width: 72px;
    height: 72px;
  }
}

/* Design Lab Pantone matching: one field by default, expandable to four. */
.pantonePanel .pantoneDetails {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.pantonePanel .pantoneField {
  display: grid;
  gap: 6px;
  color: #dbe5ec;
  font-size: 13px;
  font-weight: 800;
}

.pantonePanel .pantoneInput {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #31536b;
  border-radius: 6px;
  background: #050c14;
  color: #f5f7fb;
  font: inherit;
  box-sizing: border-box;
}

.pantonePanel .pantoneInput:focus {
  border-color: #b9ff3c;
  outline: none;
  box-shadow: 0 0 0 2px rgba(185, 255, 60, 0.16);
}

.pantoneMorePrompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 4px;
}

.pantoneMorePrompt small {
  color: #96a8b5;
  font-size: 11px;
  line-height: 1.35;
}

.pantoneMoreChoices {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.pantoneMoreChoices button {
  min-width: 48px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid #31536b;
  border-radius: 5px;
  background: #071420;
  color: #dbe5ec;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.pantoneMoreChoices button:hover,
.pantoneMoreChoices button:focus-visible,
.pantoneMoreChoices button.active {
  border-color: #b9ff3c;
  color: #b9ff3c;
  outline: none;
}

.pantoneExtraFields {
  display: grid;
  gap: 10px;
}

.pantoneExtraFields[hidden] {
  display: none !important;
}

@media (max-width: 560px) {
  .pantoneMorePrompt {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* 20L Two-Tone Tote: centered photos, front-only color thumbnails, and clear method controls. */
body[data-product="Q-TEES Q125800"] .customCanvas .blankProduct {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
}

body[data-product="Q-TEES Q125800"] .customCanvas .printBoundary {
  top: 42% !important;
  left: 50% !important;
  width: 31% !important;
  height: 23% !important;
  transform: translate(-50%, -50%) !important;
  border-color: rgba(185, 255, 60, 0.85) !important;
}

.toteMethodPicker,
.toteDesignMethod {
  border: 1px solid #31536b;
  background: rgba(4, 20, 32, 0.72);
}

.toteMethodPicker {
  margin-top: 18px;
  padding: 18px;
}

.toteMethodPicker .seg,
.toteDesignMethod .seg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.toteMethodPicker .seg button,
.toteDesignMethod .seg button {
  min-height: 52px;
}

body[data-product="Q-TEES Q125800"] .manySwatches button {
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* Q600 Large Tote: true-centered transparent product views and 14 x 10 imprint area. */
body[data-product="Q-TEES Q600"] .customCanvas .blankProduct {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
}

body[data-product="Q-TEES Q600"] .customCanvas .printBoundary {
  top: 68% !important;
  left: 50% !important;
  width: 56% !important;
  height: 40% !important;
  transform: translate(-50%, -50%) !important;
  border-color: rgba(185, 255, 60, 0.85) !important;
}

body[data-product="Q-TEES Q600"] .manySwatches button {
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.productLargeToteGallery {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

.productLargeToteGallery button {
  width: 104px;
  min-height: 112px;
  padding: 5px;
  border: 2px solid #31536b;
  border-radius: 8px;
  background: #050c14;
  color: #dbe5ec;
  cursor: pointer;
}

.productLargeToteGallery button:hover,
.productLargeToteGallery button:focus-visible,
.productLargeToteGallery button.active {
  border-color: #b9ff3c;
  outline: none;
  box-shadow: 0 0 0 2px rgba(185, 255, 60, 0.2);
}

.productLargeToteGallery img {
  display: block;
  width: 100%;
  height: 78px;
  object-fit: contain;
  object-position: center center;
}

.productLargeToteGallery span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

@media (max-width: 560px) {
  .toteMethodPicker .seg,
  .toteDesignMethod .seg {
    grid-template-columns: 1fr;
  }
}
/* Custom Beach Towel: the complete 70 × 40 inch face is printable. */
body[data-product="CUSTOM BEACH TOWEL"] .customCanvas .blankProduct {
  width: 92%;
  height: 64%;
  inset: 18% 4%;
  object-fit: contain;
  object-position: center center;
}

body[data-product="CUSTOM BEACH TOWEL"] .customCanvas .printBoundary {
  box-sizing: border-box;
  width: 86%;
  height: 43%;
  top: 28.5%;
  left: 7%;
  border: 2px dotted rgba(185, 255, 60, 0.82);
}

body[data-product="CUSTOM BEACH TOWEL"] .customCanvas .placedDesign {
  max-width: 86%;
  max-height: 43%;
}

body[data-product="CUSTOM BEACH TOWEL"] .customCanvas .placedDesign:has(> img) {
  aspect-ratio: 7 / 4;
  height: auto;
}

body[data-product="CUSTOM BEACH TOWEL"] .customCanvas .placedDesign > img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

body[data-product="CUSTOM BEACH TOWEL"] .proofNote {
  max-width: 760px;
}

.productBeachTowelGallery {
  justify-content: center;
}

.productBeachTowelGallery button {
  width: 112px;
  height: 72px;
}