.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(320px, 100%), not a flat 320px - a flat value is wider than
     the viewport itself on narrower phones once the page's own side
     padding is subtracted, which pushed the whole page into
     horizontal scroll instead of just wrapping. */
  min-width: min(320px, 100%);
}

.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-evenly;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 18px;
  padding: 18px 8px;
  background: var(--sg-primary-light, #dceeee);
  border-radius: var(--sg-radius, 10px);
}

.sgp-shipping-step {
  flex: 1 1 0;
  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;
  overflow-wrap: break-word;
}

.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 ---------- */

/* Set on <body> by openDesignModal()/closeDesignModal() in
   personalizer.js while the modal is open - pins the page in place so
   nothing behind the modal can scroll (iOS Safari's rubber-band
   scroll drags the page underneath a plain overflow:hidden modal
   otherwise). The JS saves/restores the real scroll position by hand
   since fixing the body resets it to the top. */
body.sgp-modal-open {
  overflow: hidden;
  position: fixed;
  left: 0;
  right: 0;
}

.sgp-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  /* Stops the pinch/double-tap browser zoom gesture from firing
     while browsing designs - swiping across the thumbnails was
     triggering it, not any zoom effect of ours. */
  touch-action: manipulation;
}

.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;
}

/* ---------- mobile ---------- */

@media (max-width: 768px) {
  .sgp-product-layout {
    flex-direction: column;
    gap: 0;
  }

  /* The main product photo breaks out of the page's own side padding
     to run edge-to-edge on phones, regardless of how wide that
     padding actually is - the 100vw + centered-negative-margin trick
     works no matter what the parent container's padding value is. */
  .sgp-product-layout > .woocommerce-product-gallery {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
  }

  .sgp-photo-stage {
    border-radius: 0;
    box-shadow: none;
    cursor: default;
  }

  /* Touch browsers can fire :hover on a tap, so the magnifying-glass
     zoom (great with a mouse) turns into an unwanted jump-zoom on
     phones instead. Neutralizing the scale here disables it
     regardless of whether :hover fires. */
  .sgp-photo-stage:hover #sgp-canvas,
  .sgp-photo-stage:hover #sgp-default-preview,
  .sgp-photo-stage:hover #sgp-detail-image {
    transform: none;
  }

  /* Small thumbnail squares are cramped and fiddly to tap on a phone
     - the prev/next arrows already on the photo itself are the only
     navigation kept here. The JS sets this element's display inline
     (to "flex"/"none" depending on photo count), so this needs
     !important to win. */
  .sgp-thumbnails {
    display: none !important;
  }

  /* Just enough side padding that the personalization panel, Add to
     Cart row, and dates box don't sit flush against the screen edge -
     everything else about their width is left alone so they stretch
     to fill nearly the whole screen. */
  .sgp-product-layout > .summary {
    padding: 0 4px;
  }

  .sgp-personalizer {
    padding: 14px 6px;
  }

  /* A fixed 160px label column eats too much of a narrow phone's
     width and forces the value column narrower than its own content
     can wrap into - a proportional split fits both to whatever the
     screen actually has. */
  .woocommerce-product-attributes-item__label {
    width: 40%;
    padding: 10px 8px;
  }

  .woocommerce-product-attributes-item__value {
    padding: 10px 8px;
  }

  /* Full-screen sheet instead of a floating box with margins - more
     stable and predictable on a small screen than a modal that has to
     share space with browser chrome above and below it. */
  .sgp-modal {
    padding: 0;
  }

  .sgp-modal-box {
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .sgp-audience-options {
    flex-wrap: wrap;
  }

  .sgp-audience-btn {
    padding: 16px 24px;
  }

  /* Search box and the two filter toggles were sharing one row at
     50/50 width each, which left almost no room for either on a
     phone. Stacking them keeps every control full-width and easy to
     tap. */
  .sgp-search-filter-row {
    flex-wrap: wrap;
  }

  .sgp-search,
  .sgp-mono-filters {
    flex: 1 1 100%;
    width: 100%;
  }
}