.sgp-personalizer {
  margin: 0 0 24px 0;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.sgp-title {
  margin: 0 0 18px 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--sg-text, #1a1a1a);
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
}

.sgp-personalizer table.variations {
  width: 100%;
  margin-bottom: 18px;
  border: none;
}

.sgp-personalizer table.variations td,
.sgp-personalizer table.variations th {
  border: none;
  padding: 0 0 10px 0;
}

.sgp-personalizer table.variations label {
  font-weight: 500;
  font-size: 13px;
  color: #555;
  margin-bottom: 4px;
  display: block;
}

.sgp-personalizer table.variations select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
  background: #fff;
}

.sgp-field {
  margin-bottom: 16px;
}

.sgp-field label {
  display: block;
  font-weight: 500;
  margin-bottom: 6px;
  font-size: 13px;
  color: #555;
}

.sgp-field select,
.sgp-field input[type="text"],
.sgp-field input[type="file"] {
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.sgp-field select:focus,
.sgp-field input[type="text"]:focus {
  outline: none;
  border-color: var(--sg-primary, #333);
}

.sgp-field input[type="file"] {
  padding: 8px;
  cursor: pointer;
}

.sgp-error {
  color: #b00020;
  font-weight: 600;
  font-size: 14px;
  margin-top: 10px;
}

#sgp-canvas {
  border-radius: 10px;
  transition: transform 0.15s ease-out;
  transform-origin: var(--sgp-zoom-x, 50%) var(--sgp-zoom-y, 50%);
}

.single_variation_wrap {
  display: block !important;
}

.woocommerce-product-gallery__wrapper {
  display: none !important;
}

#sgp-default-preview {
  display: block;
  width: 100%;
  border-radius: 10px;
  transition: transform 0.15s ease-out;
  transform-origin: var(--sgp-zoom-x, 50%) var(--sgp-zoom-y, 50%);
}

.woocommerce-product-gallery {
  position: relative;
}

.sgp-photo-arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--sg-text, #1a1a1a);
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  z-index: 10;
}

.sgp-photo-arrow svg {
  width: 20px;
  height: 20px;
  display: block;
}

.sgp-photo-arrow:hover {
  background: #fff;
}

.sgp-photo-arrow-prev {
  left: 12px;
}

.sgp-photo-arrow-next {
  right: 12px;
}

.reset_variations {
  display: none !important;
}

.sgp-product-header {
  width: 100%;
  margin-bottom: 20px;
}

.sgp-product-header .product_title {
  font-size: 32px;
  font-weight: 800;
  margin: 0;
  line-height: 1.2;
}

.sgp-product-layout {
  display: flex;
  align-items: stretch;
  gap: 28px;
  flex-wrap: wrap;
}

.sgp-product-layout > .woocommerce-product-gallery,
.sgp-product-layout > .summary {
  flex: 1 1 45%;
  min-width: 320px;
}

.sgp-product-layout > .summary {
  display: flex;
  flex-direction: column;
}

.sgp-price {
  font-size: 22px;
  font-weight: 700;
  color: var(--sg-text, #1a1a1a);
  margin: 6px 0 0 0;
}

.sgp-cart-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-top: 16px;
}

.sgp-cart-row .quantity {
  margin: 0;
}

.sgp-cart-row .quantity .qty {
  width: 70px;
  height: 100%;
  padding: 13px 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 15px;
  box-sizing: border-box;
}

.sgp-cart-row .single_add_to_cart_button {
  flex: 1;
  display: block;
  padding: 13px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 8px;
  text-align: center;
  margin: 0;
}

/* "Ordered / Ready to Ship / Delivered" - personalizer.js fills in
   the three dates and moves this block to sit right under the Add
   to Cart row. */
.sgp-shipping-estimate {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
  margin-top: 18px;
  padding: 18px 8px;
  background: var(--sg-primary-light, #dceeee);
  border-radius: var(--sg-radius, 10px);
}

.sgp-shipping-step {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sgp-shipping-icon {
  width: 26px;
  height: 26px;
  color: var(--sg-primary, #1b7a7a);
  margin-bottom: 8px;
}

.sgp-shipping-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.sgp-shipping-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--sg-text, #1a2e5c);
  margin-bottom: 3px;
}

.sgp-shipping-date {
  font-size: 12px;
  color: var(--sg-text-muted, #5c6b82);
}

.sgp-shipping-note {
  margin: 8px 0 0 0;
  font-size: 11px;
  font-style: italic;
  text-align: center;
  color: var(--sg-text-muted, #5c6b82);
}

.product_meta {
  display: none !important;
}

.sgp-thumbnails {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.sgp-thumb {
  width: 23%;
  aspect-ratio: 1 / 1;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  background: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  box-sizing: border-box;
}

.sgp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sgp-thumb.active {
  border-color: var(--sg-primary, #333);
}

/* One shared stage for every "photo surface" - the plain default
   preview, the live personalization canvas, and a detail shot -
   whichever of the three happens to be visible. Arrows and the
   hover-zoom are set up against THIS element, not any one of the
   three individually: they used to live inside the detail image's
   own wrapper, which collapsed to nothing (taking the arrows and
   zoom down with it) any time the canvas was the visible surface
   instead - which is every variation photo, not just "detail" shots. */
.sgp-photo-stage {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  cursor: zoom-in;
}

#sgp-detail-image {
  display: none;
  width: 100%;
  border-radius: 10px;
  transition: transform 0.15s ease-out;
  transform-origin: var(--sgp-zoom-x, 50%) var(--sgp-zoom-y, 50%);
}

.sgp-photo-stage:hover #sgp-canvas,
.sgp-photo-stage:hover #sgp-default-preview,
.sgp-photo-stage:hover #sgp-detail-image {
  transform: scale(1.6);
}

.flex-control-nav {
  display: none !important;
}

.woocommerce-product-attributes {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}

.woocommerce-product-attributes-item__label {
  text-align: left;
  padding: 12px 16px;
  background: #f7f7f7;
  font-weight: 600;
  width: 160px;
  border: 1px solid #eee;
}

.woocommerce-product-attributes-item__value {
  padding: 12px 16px;
  border: 1px solid #eee;
}

.woocommerce-product-attributes-item__value p {
  margin: 0;
}

/* Cart / Checkout tables - cleaner spacing and alignment instead of
   the default cramped, edge-to-edge look. */
table.shop_table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 20px 0;
}

table.shop_table th,
table.shop_table td {
  padding: 16px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid #eee;
}

table.shop_table th.product-price,
table.shop_table td.product-price,
table.shop_table th.product-subtotal,
table.shop_table td.product-subtotal {
  text-align: right;
}

table.shop_table img {
  border-radius: 8px;
  width: 60px;
  height: auto;
}

.cart-collaterals .cart_totals {
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 20px;
  margin-top: 10px;
}

.cart-collaterals .cart_totals table {
  width: 100%;
}

.cart-collaterals .cart_totals th,
.cart-collaterals .cart_totals td {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

/* Cart / Checkout BLOCKS - this store uses the block versions of
   Cart and Checkout (not the classic shortcode tables above), so
   nothing above actually reaches them. Without this, row labels and
   prices - including the final total - sit flush against the card's
   edge. General rule: text never touches a container's left or
   right edge, here or anywhere else. */
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar,
.wc-block-components-panel {
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

.wc-block-components-totals-item,
.wc-block-components-totals-footer-item,
.wc-block-cart-item__wrap,
.wc-block-components-order-summary-item,
.wc-block-cart-items__header,
.wc-block-cart-items__row {
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* The Cart page has no sidebar now (see the theme's layout filter),
   so it has the room to breathe: a wider, card-style frame instead
   of the default edge-to-edge block layout. */
body.woocommerce-cart .entry-content {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.wp-block-woocommerce-cart {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 14px rgba(43, 36, 26, 0.06);
  padding: 36px;
  box-sizing: border-box;
}

.wc-block-cart__submit,
.wc-block-cart-items {
  padding: 0;
}

/* ---------- artwork: browse a design OR upload a logo ---------- */

.sgp-artwork-actions {
  display: flex;
  gap: 10px;
}

.sgp-artwork-actions .sgp-btn,
.sgp-artwork-actions .sgp-btn-file {
  flex: 1 1 0;
  text-align: center;
  box-sizing: border-box;
}

.sgp-btn {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid var(--sg-primary, #333);
  border-radius: 6px;
  background: #fff;
  color: var(--sg-primary, #1a1a1a);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.sgp-btn:hover {
  background: var(--sg-primary, #1a1a1a);
  color: #fff;
}

/* The file input is driven by its label, styled as a button above. */
.sgp-artwork .sgp-btn-file {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 14px;
  color: var(--sg-primary, #1a1a1a);
}

.sgp-artwork .sgp-btn-file:hover {
  color: #fff;
}

.sgp-field input[type="file"]#sgp-logo-upload {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.sgp-chosen {
  display: none;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0 0;
  padding: 8px 12px;
  background: var(--sg-primary-light, #f4f7f4);
  border: 1px solid #bfe0e0;
  border-radius: 6px;
  font-size: 13px;
  color: var(--sg-primary-dark, #2f4a2f);
}

.sgp-link-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: #b00020;
  text-decoration: underline;
  cursor: pointer;
}

.sgp-hint {
  margin: 8px 0 0 0;
  font-size: 12px;
  color: #888;
  line-height: 1.4;
}

/* One quiet, neutral panel for every personalization-related option
   (fee, free-at-3+ note, rush) instead of each having its own
   background color and shape - rows share one border and background,
   divided by hairlines, so the group reads as a single control
   rather than a stack of mismatched badges. */
.sgp-options-panel {
  margin: 0 0 16px 0;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 6px;
  overflow: hidden;
}

.sgp-options-row {
  display: block;
  margin: 0;
  padding: 10px 12px;
  font-size: 13px;
  color: #444;
}

.sgp-options-row + .sgp-options-row {
  border-top: 1px solid #eee;
}

.sgp-fee strong,
.sgp-rush strong {
  color: var(--sg-text, #333);
}

.sgp-free-badge {
  color: var(--sg-primary-dark, #145f5f);
}

.sgp-rush {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}

.sgp-rush-check {
  flex-shrink: 0;
  padding-top: 2px;
}

.sgp-rush-note {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: #888;
}

/* A gentle, factual aside - never an error or a warning tone, just a
   quiet clarification that appears only for black colorways on
   laser-engraved items, right under the live preview where the
   question would naturally come up. */
.sgp-black-note {
  margin-top: 14px;
  padding: 12px 16px;
  background: #faf8f4;
  border: 1px solid #ece6da;
  border-left: 3px solid #c9b78c;
  border-radius: var(--sg-radius, 10px);
}

.sgp-black-note p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--sg-text-muted, #5c6b82);
}

.sgp-black-note strong {
  color: var(--sg-text, #1a2e5c);
}

/* The one deliberately-colored box on this whole panel: trust link,
   free shipping, and the satisfaction guarantee, grouped as three
   consistent lines instead of three differently-shaped badges. */
.sgp-guarantee-box {
  margin: 0 0 16px 0;
  padding: 14px 16px;
  background: var(--sg-primary-light, #f2f8f8);
  border-radius: 8px;
}

.sgp-guarantee-box p {
  margin: 0 0 10px 0;
  font-size: 13px;
  color: var(--sg-text, #333);
  line-height: 1.5;
}

.sgp-guarantee-box p:last-child {
  margin-bottom: 0;
}

.sgp-guarantee-box strong {
  color: var(--sg-primary-dark, #145f5f);
}

.sgp-guarantee-box a {
  color: var(--sg-primary-dark, #145f5f);
  text-decoration: underline;
}

.sgp-guarantee-box p a {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}

/* The header price already shows base + personalization, so
   WooCommerce's own variation price would be a second, disagreeing
   number on the same screen. */
.woocommerce-variation-price {
  display: none !important;
}

/* ---------- design picker ---------- */

.sgp-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.sgp-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

/* A fixed size, always - it never grows or shrinks depending on how
   many designs a category has. Fewer results just leaves empty space
   in the grid below; more results become another page instead of a
   taller box. */
.sgp-modal-box {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 860px;
  height: 700px;
  max-height: 90vh;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.sgp-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  font-size: 16px;
}

.sgp-modal-close {
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: #666;
  cursor: pointer;
  padding: 0 4px;
}

/* ---------- step 1: audience ---------- */

.sgp-audience-step[hidden] {
  display: none;
}

.sgp-audience-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}

.sgp-audience-prompt {
  margin: 0 0 20px 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--sg-text, #333);
}

.sgp-audience-options {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.sgp-audience-btn {
  padding: 20px 40px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    transform 0.1s ease;
}

.sgp-audience-btn:hover {
  border-color: var(--sg-primary, #1a1a1a);
  transform: translateY(-1px);
}

/* ---------- step 2: results ---------- */

.sgp-results-step[hidden] {
  display: none;
}

.sgp-results-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sgp-modal-tools {
  flex: 0 0 auto;
  padding: 14px 20px;
  border-bottom: 1px solid #eee;
}

.sgp-tools-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.sgp-audience-change {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: #444;
  cursor: pointer;
}

.sgp-audience-change:hover {
  color: var(--sg-primary, #1a1a1a);
}

.sgp-category-toggle {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  color: #777;
  text-decoration: underline;
  cursor: pointer;
}

.sgp-category-toggle:hover {
  color: var(--sg-primary, #1a1a1a);
}

.sgp-chips[hidden] {
  display: none;
}

/* Capped rather than left to wrap freely, so the chips row can never
   eat an unbounded amount of the grid's height budget. The category
   list itself is kept to under 20 per audience specifically so this
   cap is never actually reached - two, occasionally three, wrapped
   rows fit inside it with room to spare - but the cap (and the
   scroll it falls back to) stays in place as a safety net against
   whatever gets added to the catalog later. */
.sgp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  max-height: 100px;
  overflow-y: auto;
}

.sgp-chip {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  color: #444;
  cursor: pointer;
  white-space: nowrap;
}

.sgp-chip:hover {
  border-color: #999;
}

.sgp-chip.active {
  background: var(--sg-primary, #1a1a1a);
  border-color: var(--sg-primary, #1a1a1a);
  color: #fff;
}

.sgp-search-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sgp-search {
  flex: 1 1 50%;
  width: 50%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

.sgp-mono-filters {
  flex: 1 1 50%;
  width: 50%;
  display: flex;
  gap: 8px;
}

.sgp-mono-filter-btn {
  flex: 1 1 50%;
  padding: 10px 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
  color: #444;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
}

.sgp-mono-filter-btn:hover {
  border-color: #999;
}

.sgp-mono-filter-btn.active {
  background: var(--sg-primary, #1a1a1a);
  border-color: var(--sg-primary, #1a1a1a);
  color: #fff;
}

/* Always exactly 3 columns x 3 rows, filling whatever space is left
   inside the fixed-height modal box - never more, never fewer. A
   category with fewer than 9 results just leaves empty cells; more
   than 9 becomes a second page instead of a bigger grid. */
.sgp-design-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 8px;
  padding: 16px 20px;
  min-height: 0;
}

.sgp-design-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px;
  border: none;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.15s ease;
  min-height: 0;
}

.sgp-design-card:hover {
  background: var(--sg-primary-light, #f2f8f8);
}

/* 160x160px whenever there's room, exactly like before - but the
   category chips row and pagination both eat into the grid's height
   budget when they're visible, and the fixed 160px frame used to be
   an unconditional height, so a design-card whose grid row had
   shrunk below 160px (chips open + pagination showing at once) had
   its thumb overflow the card and get clipped by the card's own
   overflow:hidden - which read as the image "zooming" back in. Using
   flex-shrink here (instead of a plain height) lets the frame itself
   shrink to fit whatever the row actually has, so it's never bigger
   than its cell and nothing gets clipped. The image cap stays a
   percentage of ITS OWN frame (not the viewport) for the same reason
   - it needs to shrink right along with the frame, not just cap out
   at a fixed pixel value the shrunk frame can no longer fit either.
   The caption lives outside this box entirely, underneath it. */
.sgp-design-card .sgp-design-thumb {
  display: block;
  position: relative;
  flex: 0 1 160px;
  min-height: 0;
  width: 160px;
  max-width: 100%;
  margin: 0 auto;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
}

.sgp-design-card .sgp-design-thumb img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 70%;
  max-height: 70%;
  width: auto;
  height: auto;
  display: block;
}

.sgp-design-card span {
  font-size: 12px;
  color: var(--sg-text, #333);
  text-align: center;
  line-height: 1.3;
  word-break: break-word;
}

.sgp-design-card .sgp-design-method {
  font-size: 10px;
  color: var(--sg-text-muted, #777);
}

.sgp-modal-status {
  margin: 0;
  padding: 0 20px 16px 20px;
  font-size: 13px;
  color: #777;
}

.sgp-pagination[hidden] {
  display: none;
}

.sgp-pagination {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 20px 16px 20px;
}

.sgp-page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #fff;
  font-size: 18px;
  color: var(--sg-text, #333);
  cursor: pointer;
}

.sgp-page-btn:hover {
  border-color: var(--sg-primary, #999);
  color: var(--sg-primary, #1a1a1a);
}

.sgp-page-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

#sgp-page-label {
  font-size: 13px;
  color: #777;
  min-width: 80px;
  text-align: center;
}

/* ---------- personalized cart thumbnail ---------- */

.sgp-preview-thumb {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}