
/* v1.0.23 Step 1 live preview + tighter mobile spacing + 2-row swatches */
.lgc-graffiti-builder .lgc-step1-live-preview{
  width:100%;
  max-width:600px;
  margin:0 auto;
}
.lgc-graffiti-builder .lgc-step1-live-stage{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  overflow:hidden;
  background:#f7f7f7;
}
.lgc-graffiti-builder .lgc-step1-live-artwork,
.lgc-graffiti-builder .lgc-step1-live-presentation{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.lgc-graffiti-builder .lgc-step1-live-artwork{z-index:1;}
.lgc-graffiti-builder .lgc-step1-live-presentation{z-index:2;pointer-events:none;}
.lgc-graffiti-builder .lgc-bg-swatch-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  width:100%;
  max-width:620px;
}
.lgc-graffiti-builder .lgc-bg-swatch-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  box-sizing:border-box;
  min-width:0;
  min-height:82px;
  margin:0;
  padding:10px;
  border:1px solid #ddd;
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.lgc-graffiti-builder .lgc-bg-swatch-card:hover{border-color:#888;}
.lgc-graffiti-builder .lgc-bg-swatch-card.is-selected{
  border:3px solid #111;
  padding:8px;
}
.lgc-graffiti-builder .lgc-bg-swatch-card input[type="radio"]{
  position:absolute!important;
  opacity:0!important;
  pointer-events:none!important;
  width:1px!important;
  height:1px!important;
}
.lgc-graffiti-builder .lgc-bg-swatch-chip{
  display:block;
  flex:0 0 54px;
  width:54px;
  height:54px;
  border-radius:9px;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.lgc-graffiti-builder .lgc-bg-custom-gradient{
  background:linear-gradient(135deg,#ff1744 0%,#ff9100 20%,#fff000 38%,#32d74b 55%,#00b8ff 72%,#5b2cff 86%,#ff00b8 100%);
}
.lgc-graffiti-builder .lgc-bg-swatch-name{
  display:block;
  min-width:0;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  color:#222;
}
@media(max-width:849px){
  .lgc-graffiti-builder .lgc-step1-live-preview{
    max-width:520px;
    margin-bottom:4px;
  }
  .lgc-graffiti-builder.cac-step-1-wrapper .product-gallery-column{
    padding-bottom:6px !important;
    margin-bottom:0 !important;
  }
  .lgc-graffiti-builder.cac-step-1-wrapper .product-summary-column{
    padding-top:0 !important;
    margin-top:0 !important;
  }
  .lgc-graffiti-builder .lgc-bg-swatch-list{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    max-width:none;
    padding:2px 0 0;
  }
  .lgc-graffiti-builder .lgc-bg-swatch-card{
    min-width:0;
    min-height:118px;
    flex-direction:column;
    justify-content:center;
    gap:8px;
    padding:10px 7px;
    text-align:center;
  }
  .lgc-graffiti-builder .lgc-bg-swatch-card.is-selected{padding:8px 5px;}
  .lgc-graffiti-builder .lgc-bg-swatch-chip{
    flex-basis:60px;
    width:60px;
    height:60px;
  }
  .lgc-graffiti-builder .lgc-bg-swatch-name{
    width:100%;
    font-size:12px;
  }
}
@media(max-width:480px){
  .lgc-graffiti-builder .lgc-step1-live-preview{
    width:88%;
    max-width:none;
  }
  .lgc-graffiti-builder .lgc-bg-swatch-list{
    gap:8px;
  }
  .lgc-graffiti-builder .lgc-bg-swatch-card{
    min-height:108px;
    padding:8px 6px;
    gap:6px;
    border-radius:11px;
  }
  .lgc-graffiti-builder .lgc-bg-swatch-card.is-selected{padding:6px 4px;}
  .lgc-graffiti-builder .lgc-bg-swatch-chip{
    flex-basis:52px;
    width:52px;
    height:52px;
    border-radius:10px;
  }
  .lgc-graffiti-builder .lgc-bg-swatch-name{
    font-size:11px;
    line-height:1.15;
  }
}

/* Graffiti art builder specific styles only */
.lgc-graffiti-builder .lgc-graffiti-bg-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  width:100% !important;
  max-width:620px !important;
  gap:10px !important;
}
.lgc-graffiti-builder .lgc-graffiti-bg-card .cac-art-type-inner{
  padding:9px 7px 8px !important;
  min-height:0 !important;
}
.lgc-graffiti-builder .lgc-graffiti-bg-thumb{display:flex;align-items:center;justify-content:center;background:#fff;}
.lgc-graffiti-builder .lgc-graffiti-bg-thumb.has-image img{
  display:block !important;
  width:100% !important;
  max-width:130px !important;
  height:auto !important;
  object-fit:contain !important;
  margin:0 auto !important;
}
.lgc-graffiti-builder .lgc-graffiti-bg-thumb.is-swatch{min-height:120px;}
.lgc-graffiti-builder .lgc-graffiti-swatch-circle{display:block;width:74px;height:74px;border-radius:999px;border:1px solid #ddd;}
.lgc-graffiti-builder .lgc-graffiti-custom-pill{display:inline-flex;align-items:center;justify-content:center;width:74px;height:74px;border-radius:999px;background:#f4f4f4;border:1px solid #ddd;font-weight:700;font-size:24px;color:#444;}
.lgc-graffiti-builder .lgc-print-thumb{width:84px;flex:0 0 auto;margin:0;}
.lgc-graffiti-builder .lgc-print-thumb img{border-radius:10px;}
.lgc-graffiti-builder .lgc-left{text-align:left;margin:0;}
.lgc-graffiti-builder .cac-product-description-section{margin-top:50px;}
.lgc-graffiti-builder .cac-short-description{margin-bottom:30px;}
.lgc-graffiti-builder .cac-extras-list{display:flex;flex-direction:column;gap:12px;}
.lgc-graffiti-builder .cac-extra-item{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid #e0e0e0;border-radius:8px;cursor:pointer;}
.lgc-graffiti-builder .cac-extra-info{flex:1;display:flex;flex-direction:column;gap:2px;}
.lgc-graffiti-builder .cac-extra-name,.lgc-graffiti-builder .cac-extra-price{font-weight:600;font-size:15px;}
.lgc-graffiti-builder .cac-extra-desc{font-size:12px;color:#666;}
.lgc-graffiti-builder .cac-order-summary{background:#f9f9f9;padding:16px;border-radius:8px;}
.lgc-graffiti-builder .cac-summary-title{font-weight:600;font-size:16px;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #e0e0e0;}
.lgc-graffiti-builder .cac-summary-row{display:flex;justify-content:space-between;gap:20px;padding:6px 0;font-size:12px;}
.lgc-graffiti-builder .cac-summary-row span:first-child{color:#666;}
.lgc-graffiti-builder .cac-summary-row span:last-child{font-weight:500;text-align:right;}
.lgc-graffiti-builder .cac-extras-price-line{margin-top:6px;font-size:14px;color:#666;}
@media(max-width:849px){
  .lgc-graffiti-builder .lgc-graffiti-bg-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    max-width:440px !important;
    gap:10px !important;
  }
  .lgc-graffiti-builder .lgc-graffiti-bg-thumb.has-image img{
    max-width:125px !important;
  }
}
@media(max-width:480px){
  .lgc-graffiti-builder .lgc-graffiti-bg-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    max-width:none !important;
    gap:8px !important;
  }
  .lgc-graffiti-builder .lgc-graffiti-bg-card .cac-art-type-inner{
    padding:7px 5px 7px !important;
  }
  .lgc-graffiti-builder .lgc-graffiti-bg-thumb.has-image img{
    max-width:108px !important;
  }
}

/* Step 3 font style selector */
.lgc-graffiti-builder .lgc-font-style-section.is-hidden{
  display:none !important;
}
.lgc-graffiti-builder .lgc-font-style-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
  width:100% !important;
  max-width:470px !important;
}
.lgc-graffiti-builder .lgc-font-style-card{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:space-between !important;
  box-sizing:border-box !important;
  width:100% !important;
  height:150px !important;
  min-height:0 !important;
  max-height:150px !important;
  gap:5px !important;
  margin:0 !important;
  padding:8px 7px 9px !important;
  border:1px solid #dedede !important;
  border-radius:10px !important;
  background:#fff !important;
  cursor:pointer !important;
  overflow:hidden !important;
}
.lgc-graffiti-builder .lgc-font-style-card:hover{
  border-color:#888 !important;
}
.lgc-graffiti-builder .lgc-font-style-card.is-selected{
  border:3px solid #111 !important;
  padding:6px 5px 7px !important;
}
.lgc-graffiti-builder .lgc-font-style-card input[type="radio"]{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
  width:1px !important;
  height:1px !important;
}
.lgc-graffiti-builder .lgc-font-style-preview{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 96px !important;
  width:100% !important;
  height:96px !important;
  min-height:0 !important;
  max-height:96px !important;
  border-radius:7px !important;
  background:#f7f7f7 !important;
  overflow:hidden !important;
}
.lgc-graffiti-builder .lgc-font-style-preview.has-image{
  background:#fff !important;
}
.lgc-graffiti-builder .lgc-font-style-preview img{
  display:block !important;
  width:100% !important;
  height:96px !important;
  min-height:0 !important;
  max-height:96px !important;
  object-fit:contain !important;
  object-position:center !important;
  margin:0 !important;
}
.lgc-graffiti-builder .lgc-font-style-placeholder{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:48px !important;
  height:48px !important;
  border-radius:999px !important;
  background:#eee !important;
  color:#333 !important;
  font-weight:700 !important;
  font-size:19px !important;
  line-height:1 !important;
}
.lgc-graffiti-builder .lgc-font-style-label{
  display:block !important;
  width:100% !important;
  text-align:center !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1.15 !important;
  color:#222 !important;
  margin:0 !important;
}
@media(max-width:480px){
  .lgc-graffiti-builder .lgc-font-style-grid{
    gap:6px !important;
    max-width:none !important;
  }
  .lgc-graffiti-builder .lgc-font-style-card{
    height:130px !important;
    max-height:130px !important;
    padding:6px 4px 7px !important;
  }
  .lgc-graffiti-builder .lgc-font-style-card.is-selected{
    padding:4px 2px 5px !important;
  }
  .lgc-graffiti-builder .lgc-font-style-preview,
  .lgc-graffiti-builder .lgc-font-style-preview img{
    flex-basis:80px !important;
    height:80px !important;
    max-height:80px !important;
  }
  .lgc-graffiti-builder .lgc-font-style-label{
    font-size:11px !important;
  }
}


/* Phase 1 selected-style preview: Steps 2-4 */
.lgc-graffiti-builder .lgc-builder-visual{
  width:100%;
}
.lgc-graffiti-builder .lgc-selected-style-preview{
  width:100%;
  max-width:600px;
  margin:0 auto;
}
.lgc-graffiti-builder .lgc-selected-style-image,
.lgc-graffiti-builder .lgc-custom-preview-stage,
.lgc-graffiti-builder .lgc-custom-preview-fallback{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  overflow:hidden;
  background:#f7f7f7;
}
.lgc-graffiti-builder .lgc-selected-style-image img,
.lgc-graffiti-builder .lgc-custom-preview-fallback img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.lgc-graffiti-builder .lgc-custom-preview-stage{
  display:none;
}
.lgc-graffiti-builder .lgc-custom-preview-stage img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.lgc-graffiti-builder .lgc-custom-style-preview.is-valid-custom-color .lgc-custom-preview-stage{
  display:block;
}
.lgc-graffiti-builder .lgc-custom-style-preview.is-valid-custom-color .lgc-custom-preview-fallback{
  display:none;
}
.lgc-graffiti-builder .lgc-selected-style-caption{
  margin-top:10px;
  text-align:center;
  font-size:13px;
  line-height:1.35;
  color:#666;
}
@media(max-width:849px){
  .lgc-graffiti-builder .lgc-selected-style-preview{
    max-width:520px;
    margin-bottom:24px;
  }
}

/* v1.0.13 layered Step 2-4 live preview */
.lgc-graffiti-builder .lgc-live-preview-stage{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  overflow:hidden;
  background:#f7f7f7;
}
.lgc-graffiti-builder .lgc-live-preview-artwork,
.lgc-graffiti-builder .lgc-live-preview-presentation{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.lgc-graffiti-builder .lgc-live-preview-artwork{z-index:1;}
.lgc-graffiti-builder .lgc-live-preview-name-wrap{position:absolute;left:20%;right:20%;top:8%;height:20%;display:none;align-items:center;justify-content:center;z-index:2;pointer-events:none;overflow:hidden;}
.lgc-graffiti-builder .lgc-live-preview-name-wrap.has-text{display:flex;}
.lgc-graffiti-builder .lgc-live-preview-name{display:block;width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:normal;line-height:1.05;color:#111;text-align:center;font-size:36px;font-weight:400;letter-spacing:0;transform-origin:center center;}
.lgc-graffiti-builder .lgc-live-preview-name.is-modern{font-family:Arial,sans-serif;font-weight:400;}
.lgc-graffiti-builder .lgc-live-preview-name.is-classic{font-family:"Times New Roman",Times,serif;font-weight:400;}
.lgc-graffiti-builder .lgc-live-preview-name.is-signature{font-family:"brush-script-std",cursive;font-weight:400;line-height:.95;}
.lgc-graffiti-builder .lgc-live-preview-presentation{z-index:3;pointer-events:none;}
@media(max-width:767px){.lgc-graffiti-builder .lgc-live-preview-name-wrap{left:18%;right:18%;top:7.5%;height:21%;}}

/* v1.0.24 Step 2 hierarchy: Print Type -> Frame -> Size -> Total */
.lgc-graffiti-builder.cac-step-2-wrapper .lgc-step2-price-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin:24px 0 10px;
  padding:14px 0 12px;
  border-top:1px solid #e3e3e3;
}
.lgc-graffiti-builder.cac-step-2-wrapper .lgc-step2-price-label{
  font-size:18px;
  font-weight:700;
  line-height:1.2;
  color:#111;
}
.lgc-graffiti-builder.cac-step-2-wrapper .lgc-step2-price{
  margin:0!important;
  font-size:22px;
  font-weight:700;
  line-height:1.2;
  text-align:right;
}
.lgc-graffiti-builder.cac-step-2-wrapper .lgc-step2-price del{
  font-size:.78em;
  font-weight:400;
  opacity:.6;
  margin-right:5px;
}
@media(max-width:849px){
  .lgc-graffiti-builder.cac-step-2-wrapper .product-summary-column{
    padding-top:0!important;
  }
  .lgc-graffiti-builder.cac-step-2-wrapper .lgc-step2-price-row{
    margin-top:20px;
  }
}


/* v1.0.25 tighten Step 2 mobile preview-to-controls spacing */
@media(max-width:849px){
  .lgc-graffiti-builder.cac-step-2-wrapper .product-gallery-column{
    margin-bottom:0!important;
    padding-bottom:0!important;
  }
  .lgc-graffiti-builder.cac-step-2-wrapper .lgc-builder-visual{
    margin-bottom:0!important;
    padding-bottom:0!important;
  }
  .lgc-graffiti-builder.cac-step-2-wrapper .lgc-selected-style-preview{
    margin-bottom:4px!important;
  }
  .lgc-graffiti-builder.cac-step-2-wrapper .lgc-selected-style-caption{
    margin-top:6px!important;
    margin-bottom:0!important;
  }
  .lgc-graffiti-builder.cac-step-2-wrapper .product-summary-column{
    margin-top:0!important;
    padding-top:4px!important;
  }
  .lgc-graffiti-builder.cac-step-2-wrapper .product-summary-column > .cac-section:first-child{
    margin-top:0!important;
    padding-top:0!important;
  }
}


/* v1.0.27 enlarged frame detail selector */
.lgc-graffiti-builder .lgc-frame-choice-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  width:100%;
}
.lgc-graffiti-builder .lgc-frame-choice-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:0;
  min-height:132px;
  margin:0;
  padding:10px 8px;
  box-sizing:border-box;
  border:1px solid #ddd;
  border-radius:12px;
  background:#fff;
  text-align:center;
  cursor:pointer;
}
.lgc-graffiti-builder .lgc-frame-choice-card.is-selected{
  border:3px solid #111;
  padding:8px 6px;
}
.lgc-graffiti-builder .lgc-frame-choice-card input[type="radio"]{
  position:absolute!important;
  opacity:0!important;
  pointer-events:none!important;
  width:1px!important;
  height:1px!important;
}
.lgc-graffiti-builder .lgc-frame-choice-visual{
  display:flex;
  align-items:center;
  justify-content:center;
  width:104px;
  height:82px;
  overflow:hidden;
  border-radius:7px;
  background:#f6f6f6;
}
.lgc-graffiti-builder .lgc-frame-choice-visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.lgc-graffiti-builder .lgc-no-frame-visual{
  background:#fafafa;
  border:1px solid #e3e3e3;
}
.lgc-graffiti-builder .lgc-no-frame-icon{
  display:block;
  width:62px;
  height:46px;
  border:2px solid #c9c9c9;
  background:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,.08);
}
.lgc-graffiti-builder .lgc-frame-choice-label{
  display:block;
  width:100%;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  color:#222;
}
@media(max-width:849px){
  .lgc-graffiti-builder .lgc-frame-choice-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .lgc-graffiti-builder .lgc-frame-choice-card{
    min-height:154px;
    padding:12px 8px;
    gap:9px;
  }
  .lgc-graffiti-builder .lgc-frame-choice-card.is-selected{
    padding:10px 6px;
  }
  .lgc-graffiti-builder .lgc-frame-choice-visual{
    width:118px;
    height:96px;
    border-radius:9px;
  }
  .lgc-graffiti-builder .lgc-no-frame-icon{
    width:72px;
    height:54px;
  }
  .lgc-graffiti-builder .lgc-frame-choice-label{
    font-size:14px;
  }
}
@media(max-width:480px){
  .lgc-graffiti-builder .lgc-frame-choice-card{
    min-height:148px;
  }
  .lgc-graffiti-builder .lgc-frame-choice-visual{
    width:112px;
    height:92px;
  }
}

/* v1.0.28: No Frame is text-only so it cannot be mistaken for a white frame. */
.lgc-graffiti-builder .lgc-frame-choice-no-frame{
  justify-content:center;
}
.lgc-graffiti-builder .lgc-frame-choice-no-frame-label{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:82px;
  font-size:18px;
  font-weight:700;
  line-height:1.15;
}
@media(max-width:849px){
  .lgc-graffiti-builder .lgc-frame-choice-no-frame-label{
    min-height:96px;
    font-size:18px;
  }
}
@media(max-width:480px){
  .lgc-graffiti-builder .lgc-frame-choice-no-frame-label{
    min-height:92px;
  }
}


/* v1.0.30 tighten Step 3 mobile preview-to-personalization spacing */
@media(max-width:849px){
  .lgc-graffiti-builder.cac-step-3-wrapper .product-gallery-column{
    margin-bottom:0!important;
    padding-bottom:0!important;
  }
  .lgc-graffiti-builder.cac-step-3-wrapper .lgc-builder-visual{
    margin-bottom:0!important;
    padding-bottom:0!important;
  }
  .lgc-graffiti-builder.cac-step-3-wrapper .lgc-selected-style-preview{
    margin-bottom:4px!important;
  }
  .lgc-graffiti-builder.cac-step-3-wrapper .lgc-selected-style-caption{
    margin-top:6px!important;
    margin-bottom:0!important;
  }
  .lgc-graffiti-builder.cac-step-3-wrapper .product-summary-column{
    margin-top:0!important;
    padding-top:8px!important;
  }
  .lgc-graffiti-builder.cac-step-3-wrapper .product-summary-column > .cac-section:first-child{
    margin-top:0!important;
    padding-top:0!important;
  }
}
