@font-face{
  font-family:"StonePawsTinos";
  src:url("fonts/Tinos-Regular.ttf") format("truetype");
  font-display:swap;
}
@font-face{
  font-family:"StonePawsBookman";
  src:url("fonts/URWBookman-Light.otf") format("opentype");
  font-display:swap;
}
@font-face{
  font-family:"StonePawsCopperplate";
  src:url("fonts/EBGaramondSC12-Regular.ttf") format("truetype");
  font-display:swap;
}
@font-face{
  font-family:"StonePawsGentleScroll";
  src:url("fonts/LobsterTwo-Regular.otf") format("opentype");
  font-display:swap;
}
@font-face{
  font-family:"StonePawsClassicScroll";
  src:url("fonts/LobsterTwo-Italic.otf") format("opentype");
  font-display:swap;
}

*{box-sizing:border-box}
:root{
  --cream:#fffaf3;
  --paper:#f4eadc;
  --ink:#2b2824;
  --brown:#7d5a38;
  --brown-dark:#5b3f29;
  --gold:#b79262;
  --line:#d8c6ae;
  --charcoal:#222220;
  --danger:#8e3c35;
}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#fffaf3,#efe2d0);
}
button,input,a{font:inherit}
.designer-header{
  display:flex;
  align-items:center;
  gap:22px;
  padding:20px clamp(18px,4vw,50px);
  background:#fffaf3;
  border-bottom:1px solid var(--line);
}
.designer-header img{
  width:100px;
  height:100px;
  object-fit:cover;
  border-radius:50%;
}
.designer-header h1{
  margin:2px 0 5px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.8rem,4vw,3rem);
}
.designer-header p{margin:0}
.small-title{
  color:var(--brown-dark);
  font-weight:800;
  letter-spacing:.14em;
  font-size:.78rem;
}
.designer-layout{
  width:min(1420px,calc(100% - 28px));
  margin:28px auto;
  display:grid;
  grid-template-columns:minmax(330px,500px) minmax(420px,1fr);
  gap:28px;
  align-items:start;
}
.control-panel{display:grid;gap:16px}
.step-card{
  display:flex;
  gap:14px;
  padding:20px;
  background:rgba(255,250,243,.96);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 8px 22px rgba(71,47,24,.08);
}
.step-number{
  flex:0 0 38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--brown);
  color:white;
  font-weight:800;
}
.step-card h2{
  margin:5px 0 14px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.28rem;
}
.full-width{width:100%}
label{
  display:block;
  margin:13px 0 6px;
  font-weight:800;
}
input[type="text"],input[type="email"],textarea,select{
  width:100%;
  padding:12px 13px;
  border:1px solid #c8b69e;
  border-radius:8px;
  background:white;
  color:var(--ink);
}
select{cursor:pointer}
textarea{resize:vertical;min-height:100px}
input[type="range"]{width:100%;accent-color:var(--brown)}
.help-text,.item-count,.order-note{
  font-size:.9rem;
  color:#625a51;
  line-height:1.45;
}
.shape-buttons{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:9px;
}
button,.shape-button{
  border:1px solid #bca98e;
  border-radius:8px;
  padding:11px 12px;
  background:white;
  color:var(--ink);
  cursor:pointer;
  font-weight:700;
}
button:hover,.shape-button:hover{background:#f2e5d4}
.shape-button.active{
  color:white;
  background:var(--brown);
  border-color:var(--brown);
}
.icon-picker{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}
.icon-choice{
  min-height:104px;
  padding:8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  font-size:.72rem;
  text-align:center;
}
.icon-choice img{
  width:68px;
  height:68px;
  object-fit:contain;
  display:block;
}
.selected-label{
  padding:10px;
  border-radius:8px;
  background:#f1e5d5;
  font-weight:800;
}
.control-buttons,.finish-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}
button:disabled{
  cursor:not-allowed;
  opacity:.45;
}
.danger-button{
  color:white;
  background:var(--danger);
  border-color:var(--danger);
}
.main-action,.order-action,.etsy-link{
  color:white;
  background:var(--brown);
  border-color:var(--brown);
}
.etsy-link{
  display:block;
  margin-top:12px;
  padding:14px;
  border-radius:8px;
  text-align:center;
  text-decoration:none;
  font-weight:800;
}
.preview-panel{
  position:sticky;
  top:16px;
  padding:20px;
  border-radius:16px;
  background:#ded0bd;
  border:1px solid #c7b294;
  box-shadow:0 12px 30px rgba(50,35,20,.13);
}
.preview-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:10px;
  margin-bottom:12px;
}
.preview-heading p{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.4rem;
  font-weight:800;
}
.preview-heading span{font-size:.85rem;color:#64594c}
.svg-holder{
  width:100%;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:12px;
  background:
    radial-gradient(circle at 50% 45%,rgba(255,255,255,.2),transparent 55%),
    #c7b7a0;
}
#slateDesigner{
  width:96%;
  height:96%;
  touch-action:none;
  user-select:none;
}
.engraved-text{
  fill:#ffffff;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:700;
  cursor:grab;
  paint-order:stroke;
  stroke:#111111;
  stroke-width:1.8;
  stroke-linejoin:round;
}
.designer-icon{
  cursor:grab;
}
.designer-icon image{
  filter:drop-shadow(0 0 2px rgba(0,0,0,.95)) drop-shadow(0 0 6px rgba(0,0,0,.5));
}
.designer-item.selected{
  filter:drop-shadow(0 0 7px #efb65d) drop-shadow(0 0 3px #efb65d);
}
.designer-item.selected image{
  filter:drop-shadow(0 0 2px rgba(0,0,0,1)) drop-shadow(0 0 6px rgba(0,0,0,.65));
}
.designer-item:active{cursor:grabbing}
footer{
  padding:30px 20px;
  text-align:center;
  background:var(--charcoal);
  color:#eee0ce;
}
footer a{color:white}
footer p{margin:8px 0 0;font-size:.85rem}
@media(max-width:980px){
  .designer-layout{grid-template-columns:1fr}
  .preview-panel{position:static;order:-1}
}
@media(max-width:620px){
  .designer-header{align-items:flex-start}
  .designer-header img{width:72px;height:72px}
  .designer-layout{width:min(100% - 18px,700px);margin:12px auto 24px}
  .preview-panel{padding:10px}
  .preview-heading{display:block}
  .preview-heading span{display:block;margin-top:3px}
  .step-card{padding:15px 13px}
  .step-number{flex-basis:32px;height:32px}
  .icon-picker{grid-template-columns:repeat(2,1fr)}
  .control-buttons,.finish-buttons{grid-template-columns:1fr}
}

@media(max-width:620px){
  .preview-action-row{gap:8px;margin-top:10px;}
  .preview-below-button,
  .preview-reset-button{padding:10px 8px;font-size:.92rem;}
}

.small-heading{
  margin:20px 0 9px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.05rem;
}
.hole-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.hole-button.active{
  color:white;
  background:var(--brown);
  border-color:var(--brown);
}
.fixed-hole{
  pointer-events:none;
}

.editing-note{
  margin:14px 0 0;
  padding:11px 12px;
  border:1px solid #9ccfe8;
  border-radius:8px;
  background:#eef9ff;
  color:#294d5f;
  font-size:.88rem;
  line-height:1.45;
}
.selection-outline{
  fill:none;
  stroke:#39bfff;
  stroke-width:2.2;
  stroke-dasharray:8 5;
  vector-effect:non-scaling-stroke;
  pointer-events:none;
}

.text-selection-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:16px;
}
.text-selection-buttons button.active{
  color:white;
  background:var(--brown);
  border-color:var(--brown);
}
.design-slots{
  display:grid;
  gap:8px;
  margin-top:10px;
}
.design-slot-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
}
.design-slot-select{
  min-height:45px;
  text-align:left;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.design-slot-select.empty{
  color:#766b60;
  border-style:dashed;
  background:#faf5ed;
}
.design-slot-select.active{
  color:white;
  background:var(--brown);
  border-color:var(--brown);
}
.design-slot-delete{
  width:48px;
  min-height:45px;
  padding:8px;
  color:white;
  background:var(--danger);
  border-color:var(--danger);
}
.design-slot-delete:disabled{
  color:#8a8178;
  background:#eee8df;
  border-color:#d6cabd;
}


.icon-delete-button{
  min-width:52px;
  font-size:1.25rem;
  line-height:1;
}
.preview-mode .selection-outline{
  display:none!important;
}
.preview-mode .engraved-text{
  stroke:none!important;
  paint-order:normal!important;
}
.preview-mode .preview-heading span{
  color:var(--brown-dark);
  font-weight:700;
}
.preview-mode #previewButton{
  color:white;
  background:var(--brown);
  border-color:var(--brown);
}
.design-slot-delete{
  width:45px;
  min-height:45px;
  padding:8px;
  font-size:1.15rem;
  line-height:1;
}


/* In engraving preview mode, artwork has no editing shadow.
   Overlapping white areas merge cleanly, like one engraved design. */
.preview-mode .designer-icon image,
.preview-mode .designer-item.selected image{
  filter:none!important;
}


.text-control-card{
  margin-top:14px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fffdf9;
}
.text-control-card:first-of-type{margin-top:0}
.text-slider-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:10px;
}
.text-slider-grid label{margin-top:7px}
.text-select-button{
  width:100%;
  margin-top:13px;
}
.text-select-button.active{
  color:white;
  background:var(--brown);
  border-color:var(--brown);
}

.preview-action-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:14px;
}
.preview-below-button,
.preview-reset-button{
  width:100%;
  margin-top:0;
  padding:15px 18px;
  font-size:1.05rem;
}
.preview-reset-button{
  color:#5b3f29;
  background:#fff7ec;
  border-color:#c4ab88;
}
.preview-reset-button:hover,
.preview-reset-button:focus,
.preview-reset-button:focus-visible,
.preview-reset-button:active{
  background:#f5e7d2;
  border-color:#b89667;
}
.preview-below-button{
  color:white;
  background:var(--brown);
  border-color:var(--brown-dark);
}
.preview-below-note{
  margin:9px 4px 0;
  color:#5d5246;
  font-size:.88rem;
  line-height:1.4;
  text-align:center;
}
.svg-holder{
  background:
    linear-gradient(110deg,rgba(255,255,255,.10),transparent 34%),
    repeating-linear-gradient(2deg,rgba(65,57,48,.035) 0 1px,transparent 1px 7px),
    linear-gradient(145deg,#b9ad9d,#d1c5b4 48%,#a99b89);
}
@media(max-width:620px){
  .text-slider-grid{grid-template-columns:1fr}
}


/* Keep the slate and its Preview button visible together on desktop. */
@media(min-width:981px){
  .preview-panel{
    height:calc(100vh - 32px);
    max-height:calc(100vh - 32px);
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .preview-heading{
    flex:0 0 auto;
  }
  .svg-holder{
    flex:1 1 auto;
    min-height:0;
    aspect-ratio:auto;
  }
  #slateDesigner{
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
  }
  .preview-action-row,
  .preview-below-note{
    flex:0 0 auto;
  }
}

/* On smaller screens the slate keeps its square shape and the page scrolls normally. */
@media(max-width:980px){
  .preview-panel{
    height:auto;
    max-height:none;
    overflow:visible;
  }
  .svg-holder{
    aspect-ratio:1;
  }
}

.range-number-control{
  display:grid;
  grid-template-columns:minmax(0,1fr) 76px;
  align-items:center;
  gap:10px;
}
.size-number-input{
  width:76px!important;
  min-height:42px;
  padding:8px 6px!important;
  border:1px solid #bca88e;
  border-radius:8px;
  background:#ffffff;
  color:var(--ink);
  font-size:1rem;
  font-weight:800;
  text-align:center;
}
.size-number-input:focus{
  outline:3px solid rgba(157,109,69,.22);
  border-color:var(--brown);
}
.size-number-input:disabled{
  color:#8a8178;
  background:#eee8df;
}
.size-number-help{
  margin:7px 0 14px;
  color:#62584e;
  font-size:.86rem;
  line-height:1.4;
}
.picture-size-control{
  margin-bottom:0;
}
@media(max-width:520px){
  .range-number-control{
    grid-template-columns:minmax(0,1fr) 72px;
    gap:8px;
  }
  .size-number-input{
    width:72px!important;
  }
}

.alignment-guides{
  pointer-events:none;
}
.guide-line{
  fill:none;
  vector-effect:non-scaling-stroke;
  pointer-events:none;
}
.centre-guide{
  stroke:#ffffff;
  stroke-width:1.4;
  stroke-dasharray:4 7;
  opacity:.58;
}
.selected-guide{
  stroke:#39bfff;
  stroke-width:1.8;
  stroke-dasharray:9 5;
  opacity:.95;
}
.mirror-guide{
  stroke:#f2b84b;
  stroke-width:2;
  stroke-dasharray:5 5;
  opacity:.98;
}
.selected-centre-marker{
  fill:#39bfff;
  stroke:#102c3a;
  stroke-width:1.2;
  vector-effect:non-scaling-stroke;
}
.mirror-centre-marker{
  fill:none;
  stroke:#f2b84b;
  stroke-width:2.2;
  vector-effect:non-scaling-stroke;
}
.mirror-copy-button{
  width:100%;
  margin-top:10px;
  min-height:48px;
  color:#ffffff;
  background:#765336;
  border-color:#5d402b;
  font-weight:800;
}
.mirror-copy-button:hover,
.mirror-copy-button:focus{
  color:#ffffff;
  background:#5d402b;
}
.preview-mode .alignment-guides{
  display:none!important;
}


/* --------------------------------------------------------------------------
   MOBILE LANDSCAPE DESIGNER
   Desktop layout above 980px remains exactly as before.
   On a real phone in portrait, ask the customer to turn the phone sideways.
   In phone landscape, only the left controls scroll; the slate stays fixed.
   -------------------------------------------------------------------------- */
.rotate-device-message{
  display:none;
}

@media (hover:none) and (pointer:coarse) and (orientation:portrait) and (max-width:980px){
  html,body{
    width:100%;
    height:100%;
    overflow:hidden;
  }
  .designer-header,
  .designer-layout,
  footer{
    display:none!important;
  }
  .rotate-device-message{
    position:fixed;
    inset:0;
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:22px;
    background:linear-gradient(180deg,#fffaf3,#eadbc7);
  }
  .rotate-device-card{
    width:min(440px,100%);
    padding:26px 22px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fffaf3;
    box-shadow:0 16px 45px rgba(63,43,23,.18);
    text-align:center;
  }
  .rotate-device-card h1{
    margin:8px 0 10px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:1.7rem;
  }
  .rotate-device-card p{
    margin:0;
    color:#625a51;
    line-height:1.5;
  }
  .rotate-phone-icon{
    font-size:4rem;
    line-height:1;
    color:var(--brown);
    transform:rotate(-35deg);
  }
}

@media (orientation:landscape) and (max-width:980px){
  html,body{
    width:100%;
    height:100%;
    min-height:100%;
    overflow:hidden;
  }
  body{
    background:#e7dac7;
  }
  .rotate-device-message{
    display:none!important;
  }
  .designer-header,
  footer{
    display:none;
  }
  .designer-layout{
    width:100%;
    height:100vh;
    height:100dvh;
    margin:0;
    padding:8px;
    display:grid;
    grid-template-columns:minmax(285px,42%) minmax(0,58%);
    gap:8px;
    align-items:stretch;
    overflow:hidden;
  }
  .control-panel{
    min-width:0;
    height:100%;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding-right:4px;
    display:block;
    scrollbar-gutter:stable;
  }
  .control-panel .step-card{
    margin:0 0 8px;
    padding:11px 10px;
    gap:8px;
    border-radius:10px;
    box-shadow:0 4px 12px rgba(71,47,24,.07);
  }
  .control-panel .step-card:last-child{
    margin-bottom:2px;
  }
  .step-number{
    flex:0 0 28px;
    width:28px;
    height:28px;
    font-size:.82rem;
  }
  .step-card h2{
    margin:2px 0 8px;
    font-size:1rem;
  }
  .small-heading{
    margin:12px 0 7px;
    font-size:.9rem;
  }
  label{
    margin:8px 0 4px;
    font-size:.82rem;
  }
  input[type="text"],input[type="email"],textarea,select{
    min-height:36px;
    padding:8px 9px;
    font-size:.86rem;
  }
  button,.shape-button{
    min-height:36px;
    padding:7px 8px;
    border-radius:7px;
    font-size:.8rem;
  }
  .shape-buttons,
  .hole-buttons{
    gap:6px;
  }
  .help-text,.item-count,.order-note,.editing-note,.size-number-help{
    font-size:.75rem;
    line-height:1.35;
  }
  .text-control-card{
    margin-top:8px;
    padding:9px;
    border-radius:8px;
  }
  .text-slider-grid{
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:5px;
  }
  .range-number-control{
    grid-template-columns:minmax(0,1fr) 60px;
    gap:6px;
  }
  .size-number-input{
    width:60px!important;
    min-height:35px;
    padding:5px!important;
    font-size:.84rem;
  }
  .text-select-button{
    margin-top:8px;
  }
  .icon-picker{
    grid-template-columns:repeat(3,1fr);
    gap:6px;
  }
  .icon-choice{
    min-height:78px;
    padding:5px;
    gap:3px;
    font-size:.64rem;
  }
  .icon-choice img{
    width:49px;
    height:49px;
  }
  .design-slots{
    gap:5px;
    margin-top:6px;
  }
  .design-slot-row{
    gap:5px;
  }
  .design-slot-select,
  .design-slot-delete{
    min-height:36px;
  }
  .design-slot-delete{
    width:40px;
  }
  .control-buttons,.finish-buttons{
    gap:6px;
    margin-top:8px;
  }
  .mirror-copy-button{
    min-height:38px;
    margin-top:7px;
  }
  .preview-panel{
    position:relative;
    top:auto;
    order:initial;
    min-width:0;
    width:100%;
    height:100%;
    max-height:none;
    padding:8px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border-radius:11px;
  }
  .preview-heading{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    margin-bottom:5px;
  }
  .preview-heading p{
    font-size:1rem;
  }
  .preview-heading span{
    font-size:.7rem;
  }
  .svg-holder{
    flex:1 1 auto;
    width:100%;
    min-height:0;
    aspect-ratio:auto;
    border-radius:8px;
  }
  #slateDesigner{
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
  }
  .preview-action-row{
    flex:0 0 auto;
    gap:6px;
    margin-top:6px;
  }
  .preview-below-button,
  .preview-reset-button{
    min-height:36px;
    padding:7px 10px;
    font-size:.82rem;
  }
  .preview-below-note{
    display:none;
  }
}

/* Extra tightening for shorter phones in landscape. */
@media (orientation:landscape) and (max-width:980px) and (max-height:430px){
  .designer-layout{
    grid-template-columns:minmax(270px,43%) minmax(0,57%);
    padding:5px;
    gap:5px;
  }
  .control-panel .step-card{
    padding:8px;
    margin-bottom:5px;
  }
  .preview-panel{
    padding:5px;
  }
  .preview-heading span{
    display:none;
  }
}

/* Per-picture controls are mobile-only. Desktop keeps the existing shared Step 4 controls. */
.slot-image-controls,
.mobile-slot-controls-note{
  display:none;
}

@media (max-width:980px){
  .mobile-slot-controls-note{
    display:block;
    margin:6px 0 8px;
    padding:7px 8px;
    border-radius:7px;
    background:#f1e5d5;
    color:#5b3f29;
    font-size:.74rem;
    line-height:1.3;
    font-weight:700;
  }
  .design-slot-row{
    padding:6px;
    border:1px solid #d8c6ae;
    border-radius:8px;
    background:#fffdf9;
  }
  .slot-image-controls{
    grid-column:1 / -1;
    display:grid;
    gap:5px;
    padding-top:5px;
    border-top:1px solid #eadfce;
  }
  .slot-control-line{
    display:grid;
    grid-template-columns:38px minmax(0,1fr) 54px;
    gap:6px;
    align-items:center;
  }
  .slot-control-line label{
    margin:0;
    font-size:.72rem;
    font-weight:800;
  }
  .slot-control-line input[type="range"]{
    min-width:0;
    width:100%;
  }
  .slot-control-number{
    width:54px!important;
    min-height:31px;
    padding:4px 3px!important;
    border:1px solid #c8b69e;
    border-radius:6px;
    background:white;
    text-align:center;
    font-size:.76rem;
  }

  /* The duplicate shared Size and Turn controls are hidden on phone landscape only. */
  .selected-controls label[for="sizeSlider"],
  .selected-controls .picture-size-control,
  .selected-controls .size-number-help,
  .selected-controls label[for="rotateSlider"],
  .selected-controls #rotateSlider{
    display:none!important;
  }
}


/* Mobile landscape refinement: every image has its own controls, so the old shared Step 4 is removed on mobile only. */
@media (max-width:980px){
  .selected-controls{
    display:none!important;
  }
  .save-step-number{
    font-size:0;
  }
  .save-step-number::after{
    content:"4";
    font-size:.82rem;
  }
  .slot-mirror-button{
    width:100%;
    min-height:34px;
    margin-top:1px;
    padding:6px 8px;
    border-color:#7d5a38;
    color:#fff;
    background:#7d5a38;
    font-size:.74rem;
    font-weight:800;
  }
}

/* Desktop remains unchanged: the per-image mirror buttons stay mobile-only. */
@media (min-width:981px){
  .slot-mirror-button{
    display:none!important;
  }
}


/* Preview-only launch notice */
.coming-soon-button{
  color:#4d4034;
  background:#eee3d4;
  border-color:#bfa98c;
  font-weight:800;
}
.coming-soon-button:disabled{
  opacity:1;
  cursor:not-allowed;
}
.coming-soon-notice{
  margin-top:14px;
  padding:14px 16px;
  border:2px solid #a77b49;
  border-radius:10px;
  background:#fff4df;
  color:#3d3024;
  line-height:1.5;
}


/* --------------------------------------------------------------------------
   DESKTOP VERSION MATCHES MOBILE DESIGNER
   Show per-image controls on desktop as well, remove old shared Step 4,
   and keep the left controls scrolling while the slate stays fixed on the right.
   -------------------------------------------------------------------------- */
@media (min-width:981px){
  .designer-layout{
    width:min(1580px,calc(100% - 28px));
    height:calc(100vh - 170px);
    min-height:760px;
    margin:18px auto 26px;
    padding:0;
    grid-template-columns:minmax(380px,42%) minmax(0,58%);
    gap:12px;
    align-items:stretch;
    overflow:hidden;
  }
  .control-panel{
    min-width:0;
    height:100%;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    padding-right:6px;
    display:block;
    scrollbar-gutter:stable;
  }
  .control-panel .step-card{
    margin:0 0 10px;
  }
  .control-panel .step-card:last-child{
    margin-bottom:0;
  }
  .preview-panel{
    position:relative;
    top:auto;
    min-width:0;
    width:100%;
    height:100%;
    max-height:none;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .preview-heading{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    margin-bottom:8px;
  }
  .svg-holder{
    flex:1 1 auto;
    min-height:0;
    aspect-ratio:auto;
  }
  #slateDesigner{
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
  }
  .preview-action-row,
  .preview-below-note{
    flex:0 0 auto;
  }

  /* Use the same per-image control system as the mobile version. */
  .mobile-slot-controls-note{
    display:block;
    margin:6px 0 8px;
    padding:9px 10px;
    border-radius:8px;
    background:#f1e5d5;
    color:#5b3f29;
    font-size:.84rem;
    line-height:1.35;
    font-weight:700;
  }
  .design-slot-row{
    padding:8px;
    border:1px solid #d8c6ae;
    border-radius:9px;
    background:#fffdf9;
  }
  .slot-image-controls{
    grid-column:1 / -1;
    display:grid;
    gap:6px;
    padding-top:6px;
    border-top:1px solid #eadfce;
  }
  .slot-control-line{
    display:grid;
    grid-template-columns:42px minmax(0,1fr) 60px;
    gap:8px;
    align-items:center;
  }
  .slot-control-line label{
    margin:0;
    font-size:.8rem;
    font-weight:800;
  }
  .slot-control-line input[type="range"]{
    min-width:0;
    width:100%;
  }
  .slot-control-number{
    width:60px!important;
    min-height:34px;
    padding:5px 4px!important;
    border:1px solid #c8b69e;
    border-radius:6px;
    background:white;
    text-align:center;
    font-size:.84rem;
  }
  .slot-mirror-button{
    display:block!important;
    width:100%;
    min-height:36px;
    margin-top:2px;
    padding:7px 10px;
    border-color:#7d5a38;
    color:#fff;
    background:#7d5a38;
    font-size:.82rem;
    font-weight:800;
  }

  /* Remove the old desktop-only shared controls so desktop matches mobile. */
  .selected-controls{
    display:none!important;
  }
  .save-step-number{
    font-size:0;
  }
  .save-step-number::after{
    content:"4";
    font-size:1rem;
  }
}


/* Secure order submission */
.order-action{
  color:#fff;
  background:#2f6847;
  border-color:#245239;
}
.order-action:hover,
.order-action:focus{
  color:#fff;
  background:#245239;
}
.order-information-notice{
  margin-top:13px;
  padding:12px 13px;
  border:1px solid #a9cbb8;
  border-radius:9px;
  background:#eef8f1;
  color:#294c37;
  font-size:.9rem;
  line-height:1.48;
}
.order-modal[hidden]{display:none!important}
.order-modal{
  position:fixed;
  inset:0;
  z-index:100000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(20,17,14,.72);
  overflow:auto;
}
.order-dialog{
  position:relative;
  width:min(620px,100%);
  max-height:calc(100vh - 36px);
  overflow:auto;
  padding:clamp(22px,4vw,38px);
  border:1px solid var(--line);
  border-radius:16px;
  background:#fffaf3;
  box-shadow:0 22px 70px rgba(0,0,0,.34);
}
.order-dialog h2{
  margin:3px 42px 10px 0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.55rem,4vw,2.2rem);
}
.order-dialog-close{
  position:absolute;
  top:12px;
  right:12px;
  width:42px;
  height:42px;
  min-height:0;
  padding:0;
  border-radius:50%;
  font-size:1.7rem;
  line-height:1;
}
.order-dialog-intro{
  margin:0 0 14px;
  color:#5f564c;
  line-height:1.5;
}
.field-help{
  margin:5px 0 0;
  color:#6a6158;
  font-size:.82rem;
  line-height:1.4;
}
.order-dialog label span{
  font-weight:400;
  color:#71675e;
}
.order-consent-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:18px 0 0;
  padding:12px;
  border:1px solid #dfcfbb;
  border-radius:9px;
  background:#fffdf9;
  cursor:pointer;
}
.order-consent-row input{
  flex:0 0 auto;
  width:19px;
  height:19px;
  margin:1px 0 0;
  accent-color:#2f6847;
}
.order-consent-row span{
  color:#3e3933!important;
  font-size:.9rem;
  line-height:1.42;
}
.order-form-actions{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:10px;
  margin-top:17px;
}
.order-status{
  min-height:22px;
  margin:12px 0 0;
  color:#5b3f29;
  font-weight:700;
  line-height:1.4;
}
.order-status.error{
  padding:10px;
  border:1px solid #d9aaa5;
  border-radius:8px;
  background:#fff0ee;
  color:#7b302b;
}
.order-success-panel{text-align:center}
.success-tick{
  width:64px;
  height:64px;
  margin:0 auto 14px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:#2f6847;
  font-size:2.1rem;
  font-weight:900;
}
.order-reference-display{
  margin:18px 0;
  padding:15px 12px;
  border:2px dashed var(--brown);
  border-radius:10px;
  background:#f7eddf;
  color:#3c2b1e;
  font-family:Consolas,"Courier New",monospace;
  font-size:clamp(1.15rem,4vw,1.65rem);
  font-weight:900;
  letter-spacing:.06em;
  overflow-wrap:anywhere;
}
.order-success-actions{
  display:grid;
  gap:10px;
}
.order-success-actions .etsy-link{margin-top:0}
.order-success-note{
  margin:15px 0;
  color:#61574d;
  font-size:.88rem;
  line-height:1.45;
}
.close-success-button{width:100%}
body.order-modal-open{overflow:hidden}

@media(max-width:620px){
  .order-dialog{padding:22px 16px}
  .order-form-actions{grid-template-columns:1fr}
}

@media (orientation:landscape) and (max-width:980px){
  .order-modal{
    padding:7px;
  }
  .order-dialog{
    width:min(720px,96vw);
    max-height:calc(100dvh - 14px);
    padding:16px 18px;
  }
  .order-dialog h2{font-size:1.35rem;margin-bottom:6px}
  .order-dialog-intro{font-size:.82rem;margin-bottom:8px}
  .order-dialog label{margin-top:7px;font-size:.78rem}
  .order-dialog input[type="text"],
  .order-dialog input[type="email"],
  .order-dialog textarea{
    min-height:34px;
    padding:7px 8px;
    font-size:.8rem;
  }
  .order-dialog textarea{min-height:58px}
  .field-help{font-size:.7rem}
  .order-consent-row{margin-top:9px;padding:8px}
  .order-consent-row span{font-size:.74rem}
  .order-form-actions{margin-top:9px}
  .order-status{margin-top:7px;font-size:.76rem}
}


/* --------------------------------------------------------------------------
   Mobile text-entry focus mode
   The slate keeps its normal mobile size when the keyboard opens. The active
   Name or Date field is pinned above the keyboard, and the full-size slate is
   moved vertically so the exact text position remains visible while typing.
   -------------------------------------------------------------------------- */
.mobile-text-focus-bar{
  display:none;
}

.mobile-text-focus-entry{
  display:none;
}

@media (hover:none) and (pointer:coarse) and (orientation:landscape) and (max-width:980px){
  body.mobile-text-focus-active{
    overflow:hidden;
  }

  body.mobile-text-focus-active .mobile-text-focus-bar{
    position:fixed;
    z-index:10020;
    top:var(--mobile-text-bar-top,4px);
    left:var(--mobile-text-bar-left,4px);
    display:block;
    width:var(--mobile-text-bar-width,280px);
    height:68px;
    padding:6px 8px;
    border:1px solid #c8b69e;
    border-radius:10px;
    background:#fffaf3;
    box-shadow:0 5px 16px rgba(53,36,20,.18);
  }

  .mobile-text-focus-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }

  .mobile-text-focus-heading label{
    margin:0;
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#302921;
    font-family:Georgia,"Times New Roman",serif;
    font-size:1.05rem;
    font-weight:800;
    line-height:1.15;
  }

  .mobile-text-focus-heading button{
    min-height:26px;
    padding:3px 12px;
    border-color:var(--brown);
    color:#fff;
    background:var(--brown);
    font-size:.76rem;
  }

  body.mobile-text-focus-active #mobileTextFocusInput.mobile-text-focus-entry{
    position:fixed!important;
    z-index:10030;
    top:calc(var(--mobile-text-bar-top,4px) + 31px);
    left:calc(var(--mobile-text-bar-left,4px) + 8px);
    width:calc(var(--mobile-text-bar-width,280px) - 16px)!important;
    height:33px!important;
    min-height:33px!important;
    margin:0!important;
    padding:4px 9px!important;
    border:2px solid #2f2923!important;
    border-radius:8px!important;
    background:#fff!important;
    color:#201c18!important;
    box-shadow:none!important;
    font-size:17px!important;
    line-height:1.2!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    touch-action:auto!important;
    -webkit-user-select:text!important;
    user-select:text!important;
    caret-color:#201c18!important;
  }

  /* Preserve the preview's normal pre-keyboard dimensions. Only its vertical
     position changes so the active Name or Date remains in the visible area. */
  body.mobile-text-focus-active .preview-panel{
    position:fixed!important;
    z-index:10000;
    left:var(--mobile-text-preview-left,42vw)!important;
    top:var(--mobile-text-preview-top,0px)!important;
    width:var(--mobile-text-preview-width,58vw)!important;
    height:var(--mobile-text-preview-height,100vh)!important;
    max-height:none!important;
    margin:0!important;
  }

  body.mobile-text-focus-active .control-panel{
    overscroll-behavior:none;
  }
}

@media (hover:none) and (pointer:coarse) and (orientation:landscape) and (max-width:980px) and (max-height:230px){
  body.mobile-text-focus-active .mobile-text-focus-bar{
    height:62px;
    padding-top:4px;
  }
  body.mobile-text-focus-active #mobileTextFocusInput.mobile-text-focus-entry{
    top:calc(var(--mobile-text-bar-top,3px) + 27px);
    height:31px!important;
    min-height:31px!important;
  }
  .mobile-text-focus-heading button{
    min-height:23px;
    padding:2px 10px;
  }
}

/* Keep the engraving-preview button clearly highlighted on touch devices.
   Some mobile browsers retain the generic button hover colour after a tap. */
#previewButton.preview-below-button,
#previewButton.preview-below-button:hover,
#previewButton.preview-below-button:focus,
#previewButton.preview-below-button:focus-visible,
#previewButton.preview-below-button:active {
  color: #ffffff !important;
  background: var(--brown) !important;
  border-color: var(--brown-dark) !important;
  opacity: 1 !important;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.14), 0 2px 5px rgba(0,0,0,.12);
  -webkit-tap-highlight-color: transparent;
}

body.preview-mode #previewButton.preview-below-button,
body.preview-mode #previewButton.preview-below-button:hover,
body.preview-mode #previewButton.preview-below-button:focus,
body.preview-mode #previewButton.preview-below-button:active {
  color: #ffffff !important;
  background: var(--brown-dark) !important;
  border-color: var(--brown-dark) !important;
}

/* Apple touch slider compatibility ------------------------------------------
   iPhone and iPad Safari use a very small, pale native range control in the
   landscape designer. Give the name/date size and turn sliders the same clear,
   finger-friendly brown track and large handle used on Android. */
@supports (-webkit-touch-callout: none) {
  @media (hover:none) and (pointer:coarse) and (orientation:landscape) and (max-width:980px) {
    #nameSizeSlider,
    #dateSizeSlider,
    #nameRotateSlider,
    #dateRotateSlider {
      -webkit-appearance:none;
      appearance:none;
      display:block;
      width:100%;
      height:40px;
      min-height:40px;
      margin:0;
      padding:0;
      border:0;
      background:transparent;
      accent-color:var(--brown);
      touch-action:pan-x;
    }

    #nameSizeSlider::-webkit-slider-runnable-track,
    #dateSizeSlider::-webkit-slider-runnable-track,
    #nameRotateSlider::-webkit-slider-runnable-track,
    #dateRotateSlider::-webkit-slider-runnable-track {
      width:100%;
      height:9px;
      border:1px solid #a99377;
      border-radius:999px;
      background:#eee8df;
      box-shadow:inset 0 1px 2px rgba(61,42,24,.12);
    }

    #nameSizeSlider::-webkit-slider-thumb,
    #dateSizeSlider::-webkit-slider-thumb,
    #nameRotateSlider::-webkit-slider-thumb,
    #dateRotateSlider::-webkit-slider-thumb {
      -webkit-appearance:none;
      appearance:none;
      width:30px;
      height:30px;
      margin-top:-11px;
      border:2px solid #7a5030;
      border-radius:50%;
      background:var(--brown);
      box-shadow:0 2px 5px rgba(52,34,18,.25);
    }

    #nameSizeSlider:focus-visible,
    #dateSizeSlider:focus-visible,
    #nameRotateSlider:focus-visible,
    #dateRotateSlider:focus-visible {
      outline:3px solid rgba(157,109,69,.28);
      outline-offset:2px;
      border-radius:8px;
    }

    /* Give each slider enough horizontal room without altering Android. */
    .text-slider-grid {
      grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
      column-gap:12px;
    }

    .range-number-control {
      grid-template-columns:minmax(110px,1fr) 60px;
      gap:8px;
    }
  }
}

/* Apple name/date slider layout fix -----------------------------------------
   The large Apple slider thumbs previously sat over the numeric size box in
   the neighbouring Turn column. Keep the size value in its own row directly
   beneath the Size slider, so Name and Date controls never overlap. */
@supports (-webkit-touch-callout: none) {
  @media (hover:none) and (pointer:coarse) and (orientation:landscape) and (max-width:980px) {
    .text-slider-grid {
      grid-template-columns:minmax(0,1fr) minmax(0,1fr);
      align-items:start;
      column-gap:14px;
    }

    .range-number-control {
      display:grid;
      grid-template-columns:minmax(0,1fr);
      grid-template-rows:40px 36px;
      align-items:center;
      gap:4px;
      min-width:0;
    }

    #nameSizeSlider,
    #dateSizeSlider {
      grid-column:1;
      grid-row:1;
      min-width:0;
    }

    #nameSizeNumber,
    #dateSizeNumber {
      position:static!important;
      grid-column:1;
      grid-row:2;
      justify-self:center;
      width:72px!important;
      min-width:72px!important;
      max-width:72px!important;
      min-height:34px!important;
      height:34px!important;
      margin:0!important;
      padding:4px 6px!important;
      z-index:auto!important;
    }

    #nameRotateSlider,
    #dateRotateSlider {
      min-width:0;
    }
  }
}


/* Reduce Safari text assistance as much as the browser allows so Apple
   text entry behaves more like Android. */
@supports (-webkit-touch-callout: none) {
  input[autocorrect="off"] {
    -webkit-user-modify: read-write-plaintext-only;
  }
}


/* Prevent iOS Safari pull-to-refresh/page panning while positioning artwork. */
@media (hover:none) and (pointer:coarse) and (orientation:landscape) and (max-width:980px) {
  html, body {
    overscroll-behavior: none;
  }
  .preview-panel,
  .svg-holder,
  #slateDesigner {
    touch-action: none !important;
    overscroll-behavior: none;
    -webkit-user-select: none;
    user-select: none;
  }
}


/* ========================================================================== 
   PORTRAIT PHONE DESIGNER
   The live slate remains fixed in the upper part of the screen. Only the
   controls underneath it scroll. Desktop and the established landscape
   designer remain unchanged.
   ========================================================================== */
.portrait-control-hint{
  display:none;
}

@media (hover:none) and (pointer:coarse) and (orientation:portrait) and (max-width:980px){
  html,
  body{
    width:100%;
    height:100%;
    min-height:100%;
    overflow:hidden!important;
    overscroll-behavior:none;
  }

  body{
    background:#e7dac7;
  }

  .rotate-device-message{
    display:none!important;
  }

  .designer-header,
  footer{
    display:none!important;
  }

  .designer-layout{
    position:fixed;
    inset:0;
    width:100%;
    height:100vh;
    height:100dvh;
    margin:0;
    padding:6px;
    display:grid!important;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:clamp(250px,48dvh,430px) minmax(0,1fr);
    gap:6px;
    align-items:stretch;
    overflow:hidden;
  }

  .preview-panel{
    position:relative!important;
    inset:auto!important;
    order:1;
    min-width:0;
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    margin:0!important;
    padding:6px;
    display:flex;
    flex-direction:column;
    overflow:hidden!important;
    border-radius:12px;
  }

  .preview-heading{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:4px;
  }

  .preview-heading p{
    margin:0;
    font-size:.94rem;
  }

  .preview-heading span{
    max-width:62%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.68rem;
  }

  .svg-holder{
    flex:1 1 auto;
    width:100%;
    min-height:0;
    aspect-ratio:auto!important;
    overflow:hidden;
    border-radius:8px;
    touch-action:none!important;
    overscroll-behavior:none;
    -webkit-user-select:none;
    user-select:none;
  }

  #slateDesigner{
    display:block;
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    touch-action:none!important;
    overscroll-behavior:none;
    -webkit-user-select:none;
    user-select:none;
  }

  .preview-action-row{
    flex:0 0 auto;
    gap:6px;
    margin-top:5px;
  }

  .preview-below-button,
  .preview-reset-button{
    min-height:35px;
    padding:7px 8px;
    font-size:.79rem;
  }

  .preview-below-note{
    display:none;
  }

  .control-panel{
    order:2;
    min-width:0;
    min-height:0;
    width:100%;
    height:100%;
    padding:0 3px 12px 0;
    display:block!important;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-gutter:stable;
  }

  .portrait-control-hint{
    display:block;
    position:sticky;
    top:0;
    z-index:4;
    margin:0 0 6px;
    padding:8px 10px;
    border:1px solid #c8b69e;
    border-radius:9px;
    background:#fff7ec;
    color:#5b3f29;
    box-shadow:0 3px 10px rgba(71,47,24,.08);
    font-size:.77rem;
    font-weight:800;
    line-height:1.3;
    text-align:center;
  }

  .control-panel .step-card{
    margin:0 0 7px;
    padding:11px 10px;
    gap:8px;
    border-radius:10px;
    box-shadow:0 4px 12px rgba(71,47,24,.07);
  }

  .control-panel .step-card:last-child{
    margin-bottom:2px;
  }

  .step-number{
    flex:0 0 30px;
    width:30px;
    height:30px;
    font-size:.84rem;
  }

  .step-card h2{
    margin:2px 0 9px;
    font-size:1.05rem;
  }

  .small-heading{
    margin:12px 0 7px;
    font-size:.92rem;
  }

  label{
    margin:9px 0 5px;
    font-size:.86rem;
  }

  input[type="text"],
  input[type="email"],
  textarea,
  select{
    min-height:42px;
    padding:9px 10px;
    font-size:16px;
  }

  button,
  .shape-button{
    min-height:40px;
    padding:8px 9px;
    border-radius:8px;
    font-size:.84rem;
  }

  .shape-buttons,
  .hole-buttons{
    gap:7px;
  }

  .help-text,
  .item-count,
  .order-note,
  .editing-note,
  .size-number-help{
    font-size:.78rem;
    line-height:1.4;
  }

  .text-control-card{
    margin-top:8px;
    padding:10px;
    border-radius:9px;
  }

  .text-slider-grid{
    grid-template-columns:1fr;
    gap:8px;
    margin-top:6px;
  }

  .range-number-control{
    grid-template-columns:minmax(0,1fr) 66px;
    gap:7px;
  }

  .size-number-input{
    width:66px!important;
    min-height:38px;
    padding:6px!important;
    font-size:.88rem;
  }

  .text-select-button{
    margin-top:8px;
  }

  .icon-picker{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
  }

  .icon-choice{
    min-height:83px;
    padding:5px;
    gap:3px;
    font-size:.65rem;
  }

  .icon-choice img{
    width:52px;
    height:52px;
  }

  .design-slots{
    gap:6px;
    margin-top:7px;
  }

  .design-slot-row{
    gap:5px;
  }

  .design-slot-select,
  .design-slot-delete{
    min-height:38px;
  }

  .design-slot-delete{
    width:42px;
  }

  .control-buttons,
  .finish-buttons{
    gap:7px;
    margin-top:9px;
  }

  .mirror-copy-button{
    min-height:40px;
    margin-top:7px;
  }

  /* The per-picture controls already used by landscape are also used here. */
  .mobile-slot-controls-note{
    display:block;
  }

  /* The old shared Step 4 controls are redundant on a phone. */
  .selected-controls{
    display:none!important;
  }

  .save-step-number{
    font-size:0;
  }

  .save-step-number::after{
    content:"4";
    font-size:.9rem;
  }
}

/* Portrait text entry: keep the slate visible, then place one clear white
   typing box directly above the phone keyboard. */
@media (hover:none) and (pointer:coarse) and (orientation:portrait) and (max-width:980px){
  body.mobile-text-focus-active{
    overflow:hidden!important;
  }

  body.mobile-text-focus-active .designer-layout{
    display:block!important;
  }

  body.mobile-text-focus-active .control-panel{
    visibility:hidden!important;
    pointer-events:none!important;
    overflow:hidden!important;
  }

  body.mobile-text-focus-active .mobile-text-focus-bar{
    position:fixed;
    z-index:10020;
    top:var(--mobile-text-bar-top,calc(100dvh - 83px));
    left:var(--mobile-text-bar-left,5px);
    display:block;
    width:var(--mobile-text-bar-width,calc(100vw - 10px));
    height:78px;
    padding:7px 9px;
    border:1px solid #bda98f;
    border-radius:11px;
    background:#fffaf3;
    box-shadow:0 5px 18px rgba(53,36,20,.22);
  }

  body.mobile-text-focus-active .mobile-text-focus-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }

  body.mobile-text-focus-active .mobile-text-focus-heading label{
    margin:0;
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#302921;
    font-family:Georgia,"Times New Roman",serif;
    font-size:.98rem;
    font-weight:800;
    line-height:1.2;
  }

  body.mobile-text-focus-active .mobile-text-focus-heading button{
    min-height:27px;
    padding:3px 13px;
    border-color:var(--brown);
    color:#fff;
    background:var(--brown);
    font-size:.78rem;
  }

  body.mobile-text-focus-active #mobileTextFocusInput.mobile-text-focus-entry{
    position:fixed!important;
    z-index:10030;
    top:calc(var(--mobile-text-bar-top,calc(100dvh - 83px)) + 34px);
    left:calc(var(--mobile-text-bar-left,5px) + 9px);
    width:calc(var(--mobile-text-bar-width,calc(100vw - 10px)) - 18px)!important;
    height:36px!important;
    min-height:36px!important;
    margin:0!important;
    padding:5px 10px!important;
    border:2px solid #2f2923!important;
    border-radius:8px!important;
    background:#fff!important;
    color:#201c18!important;
    box-shadow:none!important;
    font-size:17px!important;
    line-height:1.2!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    touch-action:auto!important;
    -webkit-user-select:text!important;
    user-select:text!important;
    caret-color:#201c18!important;
  }

  body.mobile-text-focus-active .preview-panel{
    position:fixed!important;
    z-index:10000;
    left:var(--mobile-text-preview-left,5px)!important;
    top:var(--mobile-text-preview-top,5px)!important;
    width:var(--mobile-text-preview-width,calc(100vw - 10px))!important;
    height:var(--mobile-text-preview-height,calc(100dvh - 93px))!important;
    max-height:none!important;
    margin:0!important;
    padding:4px!important;
    display:flex!important;
    overflow:hidden!important;
  }

  body.mobile-text-focus-active .preview-heading,
  body.mobile-text-focus-active .preview-action-row,
  body.mobile-text-focus-active .preview-below-note{
    display:none!important;
  }

  body.mobile-text-focus-active .svg-holder{
    flex:1 1 auto!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    aspect-ratio:auto!important;
  }
}

/* Finger-friendly Apple sliders in portrait as well as landscape. */
@supports (-webkit-touch-callout:none){
  @media (hover:none) and (pointer:coarse) and (orientation:portrait) and (max-width:980px){
    #nameSizeSlider,
    #dateSizeSlider,
    #nameRotateSlider,
    #dateRotateSlider{
      -webkit-appearance:none;
      appearance:none;
      display:block;
      width:100%;
      height:42px;
      min-height:42px;
      margin:0;
      padding:0;
      border:0;
      background:transparent;
      touch-action:pan-x;
    }

    #nameSizeSlider::-webkit-slider-runnable-track,
    #dateSizeSlider::-webkit-slider-runnable-track,
    #nameRotateSlider::-webkit-slider-runnable-track,
    #dateRotateSlider::-webkit-slider-runnable-track{
      width:100%;
      height:9px;
      border:1px solid #a99377;
      border-radius:999px;
      background:#eee8df;
      box-shadow:inset 0 1px 2px rgba(61,42,24,.12);
    }

    #nameSizeSlider::-webkit-slider-thumb,
    #dateSizeSlider::-webkit-slider-thumb,
    #nameRotateSlider::-webkit-slider-thumb,
    #dateRotateSlider::-webkit-slider-thumb{
      -webkit-appearance:none;
      appearance:none;
      width:30px;
      height:30px;
      margin-top:-11px;
      border:2px solid #7a5030;
      border-radius:50%;
      background:var(--brown);
      box-shadow:0 2px 5px rgba(52,34,18,.25);
    }
  }
}

/* ============================================================
   Stone & Paws — Premium Soft Pill Buttons
   Design Your Own Slate
   ============================================================ */
:root{
  --sp-pill-gold:#c59a61;
  --sp-pill-cream:#fffaf2;
  --sp-pill-cream-2:#f0ddc3;
  --sp-pill-brown-1:#a47442;
  --sp-pill-brown-2:#84562f;
  --sp-pill-brown-3:#624026;
}

/* Most designer controls use a refined light pill by default. */
button,
.shape-button,
.text-select-button,
.mirror-copy-button,
.slot-mirror-button,
.preview-reset-button,
.close-success-button{
  border-radius:999px!important;
  border:1px solid #c8a477!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.18) 40%),
    linear-gradient(135deg,#fffdf8 0%,#f8ead7 52%,var(--sp-pill-cream-2) 100%)!important;
  color:#604126!important;
  text-shadow:none!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 5px 12px rgba(94,61,30,.10)!important;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease!important;
}

button:hover,
button:focus-visible,
.shape-button:hover,
.shape-button:focus-visible,
.text-select-button:hover,
.text-select-button:focus-visible,
.mirror-copy-button:hover,
.mirror-copy-button:focus-visible,
.slot-mirror-button:hover,
.slot-mirror-button:focus-visible,
.preview-reset-button:hover,
.preview-reset-button:focus-visible{
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.20) 40%),
    linear-gradient(135deg,#ffffff 0%,#f6e4cc 52%,#e8cda8 100%)!important;
  border-color:#bb8b50!important;
  color:#56371f!important;
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 7px 15px rgba(94,61,30,.14)!important;
}

/* Selected choices and main actions use the premium brown gradient. */
.shape-button.active,
.hole-button.active,
.text-selection-buttons button.active,
.text-select-button.active,
.main-action,
.order-action,
.etsy-link,
.preview-below-button,
#previewButton.preview-below-button,
#submitOrderButton.order-action,
#downloadPreviewButton.main-action,
#orderThisDesignButton.order-action{
  border-radius:999px!important;
  border:1px solid #c79a5d!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 35%),
    linear-gradient(135deg,var(--sp-pill-brown-1) 0%,var(--sp-pill-brown-2) 52%,var(--sp-pill-brown-3) 100%)!important;
  color:#fffaf2!important;
  text-shadow:0 1px 1px rgba(55,31,14,.22)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.27),
    inset 0 -1px 0 rgba(60,34,17,.20),
    0 8px 18px rgba(79,48,24,.20)!important;
}

.shape-button.active:hover,
.hole-button.active:hover,
.text-selection-buttons button.active:hover,
.text-select-button.active:hover,
.main-action:hover,
.order-action:hover,
.etsy-link:hover,
.preview-below-button:hover,
#previewButton.preview-below-button:hover{
  background:
    linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 35%),
    linear-gradient(135deg,#ad7b47 0%,#8b5a31 52%,#694329 100%)!important;
  color:#fffaf2!important;
  transform:translateY(-2px)!important;
}

/* Destructive actions stay clearly destructive, but match the pill style. */
.danger-button,
.icon-delete-button{
  border-radius:999px!important;
  border:1px solid #b65f57!important;
  background:linear-gradient(135deg,#b85a50 0%,#963e37 55%,#7c302b 100%)!important;
  color:#fff!important;
  box-shadow:0 6px 14px rgba(126,47,41,.16)!important;
}

/* Thumbnail/icon selector tiles remain card-shaped, because they are image choices rather than CTAs. */
.icon-choice{
  border-radius:18px!important;
}

/* Small close icon remains circular instead of becoming a wide pill. */
.order-dialog-close{
  border-radius:50%!important;
}

/* Mobile focus Done button: compact premium pill. */
.mobile-text-focus-heading button{
  border-radius:999px!important;
  padding-left:16px!important;
  padding-right:16px!important;
}