:root{
  --num-font:'Mademoiselle',sans-serif;
  --page-bg:#ffeaf2;--card-bg:#fff4f8; --dash:#bf9f8c;--dash-w:1px;
  --text-body: #a48774;--text-head:#a87080;--text-label:#d8b3c3;
  --accent:#c998ad;--shadow:rgba(200,120,150,0.13);--radius:10px;
    --shadow:rgba(200,120,150,0.13);
    --Secondary-color:#e8a9b7;
/*greens*/
--Color-1:#f5abc4;
--Color-2:#fcd5e6;
--Color-3:#e9fad2;
/*pinks*/
--Color-4:#ffedef;
--Color-5:#fcd2dc;
--Color-6:#fcebed;
/*yellows*/
--Color-7:#fffce8;
--Color-8:#f2edc9;
--Color-9:#fcfae6;
/*Shade*/
--Black:#0000;
--White:#ffff;
/*more-random-colors*/
--Color-10:#F5FFF0;
--Color-11:#e8728f;
--Color-12:#f7d4e6;
--Color-13:#ffadcd;
--Color-14:#b06d7c;
--Color-15:#f5fff7;
--Color-16:#fff5f8;
--Color-17:#fcfcf7;
/*Scroller color*/
--Color-18:#ffcfdd;
/*backgrounds*/
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
strong,b{font-weight:normal;}
html,body{height:100%;overflow-x:hidden;width:100%;}
body{font-family:'pixelatedelegance',sans-serif;font-size:10px;color:var(--text-body);background-color:var(--page-bg);min-height:100vh;display:flex;flex-direction:column;cursor:url('images/cursor-1.gif'),auto;}
a,button{cursor:url('images/cursor-1.gif'),pointer;}
#heart-dots-canvas{position:fixed;inset:0;pointer-events:none;z-index:0;}
#cursor-canvas{position:fixed;inset:0;pointer-events:none;z-index:99999;}
.page{max-width:940px;margin:0 auto;padding:0 10px 28px;position:relative;z-index:1;flex:1;display:flex;flex-direction:column;}
.outer-card{position:relative;z-index:1;background:var(--card-bg);box-shadow:0 4px 20px var(--shadow);border-radius:0;overflow:visible;flex:1;display:flex;flex-direction:column;}
.outer-card::before,.outer-card::after{content:'';position:absolute;top:0;bottom:0;width:22px;z-index:10;pointer-events:none;background-image:url('images/lace-sides.png');background-repeat:repeat-y;background-size:100% auto;}
.outer-card::before{left:-22px;transform:rotate(180deg);transform-origin:center center;}
.outer-card::after{right:-22px;transform:scaleX(-1) rotate(180deg);transform-origin:center center;}

@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes floatAnim{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.65}}
@keyframes floatUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes floatDown{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}
@keyframes sl{from{transform:translateX(0)}to{transform:translateX(-50%)}}



.box{position:relative;background:#ffffff;border:var(--dash-w) solid var(--dash);border-radius:var(--radius);outline:var(--dash-w) dashed var(--dash);outline-offset:-4px;padding:10px; margin-bottom: 20px; justify-content: center;
}

.box-title{font-family:'Pixel',sans-serif;font-size:16px;color:var(--letter-col);text-align:center;display:block;margin-bottom:7px;-webkit-text-stroke:2px #fff;text-stroke:2px #fff;paint-order:stroke fill;}

.site-grid{display:grid;grid-template-columns:200px 520px 200px;grid-template-rows:auto 1fr;grid-template-areas:"left header header" "left centre right";align-items:stretch;flex:1;}



.centre-col{grid-area:centre;padding:8px 6px;display:flex;flex-direction:column;gap:8px;background-image:url('images/checked-pink.png');background-repeat:repeat;background-size:160px 285px;}
.right-col{grid-area:right;padding:8px 8px 8px 6px;display:flex;flex-direction:column;gap:8px;border-left:var(--dash-w) dashed var(--dash);background-image:url('images/dot-blue.png');background-repeat:repeat;background-size:120px 120px;}



.art-box{padding:0;overflow:hidden;border-radius:var(--radius);}
.art-box img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;}

.linkme-btn-img{display:block;margin:4px auto 6px;image-rendering:pixelated;max-width:100%;}
.linkme-code{width:100%;font-family:monospace;font-size:11px;color:var(--text-body);background:#fffafc;border:var(--dash-w) dashed var(--dash);border-radius:6px;padding:4px 5px;resize:none;height:36px;line-height:1.4;display:block;}
.linkme-code:focus{outline:none;}
.copy-btn{display:block;margin:4px auto 0;padding:2px 12px;border-radius:999px;border:var(--dash-w) dashed var(--dash);background:#fff8f9;font-family:'BodyFont',sans-serif;font-size:18px;color:var(--text-body);transition:background .2s,color .2s;}

/* Header */

.win-header {
  background: #ffeff7; background-image: url('/background/invertedpinkpolka.gif'); padding: 8px 12px; display: flex; justify-content: space-between;align-items: center; border-bottom: 1px solid #ffdaed;
  border-radius: 10px; box-shadow: inset 2px 2px 0px rgba(255, 255, 255, 0.8), inset -2px -2px 2px rgba(215, 127, 171, 0.15); user-select: none; flex-shrink: 0; margin-bottom: 10px; justify-content: center;
  margin-top: -10px;
  margin-right: -10px;
  margin-left: -10px;
  border-bottom:5px solid #ece2dc;
}

.win-header::before {
content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
background-image: url('/placeholder.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 10;
}

/* ── COMMISSION MENU SPECIFIC ── */
.comms-section-head{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:6px;}
.bow-img{height:18px;width:auto;image-rendering:pixelated;}
.menu-welcome-text{font-size:17px;line-height:1.8;color:var(--text-body);text-align:center;margin-top:4px;}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}

.card{background:#fff9fb;border:var(--dash-w) solid var(--dash);border-radius:var(--radius);outline:var(--dash-w) dashed var(--dash);outline-offset:-4px;padding:10px 8px;text-align:center;
      box-shadow: inset -1px -1px var(--Color-2), inset 1px 1px var(--Color-2), inset -2px -2px var(--Color-2), inset 2px 2px #fff; display:flex;flex-direction:column;gap:4px;position:relative;transition:transform .18s; width: 100%;}

.card:hover{transform:translateY(-2px);
-webkit-box-shadow:0px 0px 22px 3px rgba(245,188,219,0.52);
-moz-box-shadow: 0px 0px 22px 3px rgba(245,188,219,0.52);
box-shadow: 0px 0px 22px 3px rgba(245,188,219,0.52);
}
.name{font-family:'Spirit',sans-serif;font-size:16px;color:var(--letter-col);-webkit-text-stroke:2px #fff;text-stroke:2px #fff;paint-order:stroke fill;display:block;}
.price{font-family:var(--num-font);font-size:22px;font-weight:700;color:var(--accent);line-height:1;display:block;margin:2px 0;}
.divider{border:none;border-top:var(--dash-w) dashed var(--dash);margin:4px 0;}
.list{list-style:none;padding:0;margin:0;text-align:left;display:flex;flex-direction:column;gap:3px;flex:1;}
.list li{font-size:10px;color:var(--text-body);display:flex;align-items:flex-start;gap:4px;line-height:1.4;}
.list li::before{content:'♡';color:var(--dash);flex-shrink:0;font-size:14px;margin-top:1px;}
.enquire{display:inline-block;margin-top:6px;padding:3px 12px;border-radius:999px;border:var(--dash-w) dashed var(--dash);background:#ffeaf5;font-family:'willow',sans-serif;font-size:10px;color:var(--text-body);text-decoration:none;transition:background .2s,color .2s; transition: 0.5s;
}
.enquire:hover{background:#ffd8ec;color:var(--letter-col); letter-spacing: 3px;}

/* 2-row 3-col examples grid */
.comm-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;}
.comm-thumb{aspect-ratio:1/1;overflow:hidden;border: solid;
  border-width: 1px;
  margin: 5px;
  border-color: #d8c0b0;
border-radius:10px 10px 0px 0px;background:#ffd8ec;position:relative;}


.comm-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s;}
.comm-thumb:hover img{transform:scale(1.04);      transition: 0.5s;
}
.comm-thumb-label{position:absolute;bottom:0;left:0;right:0;background:rgba(255,255,255,.82);font-size:14px;color:var(--letter-col);text-align:center;padding:2px 4px;font-family:'BodyFont',sans-serif;}

/* add-ons + how it works side by side */
.addon-howitworks-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch;}
.addon-howitworks-row .box{display:flex;flex-direction:column;}
.addon-howitworks-row .process-steps{flex:1;justify-content:space-between;}
.addon-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;flex:1;}
.addon-pill{background:#fff8fb;border:var(--dash-w) dashed var(--dash);border-radius:var(--radius);padding:5px 6px;text-align:center;display:flex;flex-direction:column;justify-content:center;}
.addon-name{display:block;font-size:10px;color:var(--text-body);line-height:1.3;}
.addon-price{display:block;font-family:var(--num-font);font-size:18px;font-weight:700;color:var(--accent);margin-top:1px;}

.info-note{background:#fffef8;border:var(--dash-w) dashed var(--dash);border-radius:var(--radius);padding:8px 10px;font-size:16px;color:var(--text-body);line-height:1.8;text-align:center;}
.info-note strong{color:var(--letter-col);}

/* process steps (right col) */
.process-steps{display:flex;flex-direction:column;gap:5px;}
.process-step{display:flex;align-items:flex-start;gap:7px;font-size:10px;color:var(--text-body);line-height:1.5;}
.step-num{font-family:var(--num-font);font-size:10px;font-weight:normal;color:#fff;background:var(--dash);border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}





/* lightbox */
.lightbox{display:none;position:fixed;inset:0;background:rgba(180,100,130,.45);backdrop-filter:blur(3px);z-index:99998;align-items:center;justify-content:center;cursor:url('images/cursor-1.gif'),pointer;flex-direction:column;gap:14px;}
.lightbox.open{display:flex;}
.lightbox-frame{position:relative;border:14px solid transparent;border-image:url('images/lace-border.png') 7 round;background:transparent;padding:0;border-radius:0;max-width:90vw;max-height:80vh;display:flex;overflow:hidden;}
.lightbox-frame::after{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--dash) 50%,transparent 0),
    linear-gradient(to right,var(--dash) 50%,transparent 0),
    linear-gradient(to bottom,var(--dash) 50%,transparent 0),
    linear-gradient(to bottom,var(--dash) 50%,transparent 0);
  background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;
  background-position:top,bottom,left,right;
  background-size:8px 1px,8px 1px,1px 8px,1px 8px;
}
.lightbox img{max-width:80vw;max-height:76vh;border-radius:0;display:block;}
.lightbox-hint{font-family:'BodyFont','Segoe UI',sans-serif;font-size:18px;color:#fff4f8;letter-spacing:.5px;pointer-events:none;text-shadow:0 1px 4px rgba(120,40,70,.5);}
.lightbox-nav{position:fixed;top:50%;transform:translateY(-50%);background:rgba(255,244,248,.9);border:var(--dash-w) dashed var(--dash);color:var(--accent);font-size:20px;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .15s;z-index:99999;}
.lightbox-nav:hover{background:#ffd8ec;transform:translateY(-50%) scale(1.08);}
.lightbox-prev{left:16px;}
.lightbox-next{right:16px;}
@media(max-width:950px){
  .lightbox-nav{width:38px;height:38px;font-size:18px;}
  .lightbox-prev{left:8px;}
  .lightbox-next{right:8px;}
}

/* ══ MOBILE ══ */
@media(max-width:950px){
  img,svg,canvas,iframe,video{max-width:100%;}
  .cal-box-square{flex:none;height:auto;}
  .cal-table{height:auto;}
  .box,.box-title,.header-tagline,.comms-pill,.comms-note,.player-song,.player-artist,.social-btn,.snav-link,.linkme-code,p,span,div{overflow-wrap:break-word;word-break:break-word;}
  .page{max-width:100%;padding:0 4px 20px;}
  .outer-card::before,.outer-card::after{display:none;}
  .site-grid{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto auto;
    grid-template-areas:
      "header"
      "left"
      "centre"
      "right";
    gap:16px;
  }
  .left-col{
    border:var(--dash-w) dashed var(--dash);
    border-radius:var(--radius);
    box-shadow:0 4px 14px var(--shadow);
    margin:0;
    min-width:0;
  }
  .right-col{
    border:var(--dash-w) dashed var(--dash);
    border-radius:var(--radius);
    box-shadow:0 4px 14px var(--shadow);
    margin:0;
    min-width:0;
  }

  .cards{grid-template-columns:1fr;}
  .addon-howitworks-row{grid-template-columns:1fr;}

}


.image-wrapper {
	height: 12rem;
	width: 12rem;
	border-radius: 6px;
	background-color: #ccc;
	display: flex;
	align-items: center;
	text-align: center;
	line-height: 1.6;


	img {
		height: auto;
		max-width: 100%;
	}
}

.shine {
	position: relative;
	overflow: hidden;
  		z-index: 9999999999;

	&::before {
		background: linear-gradient(
			to right,
			fade_out(#fff, 1) 0%,
			fade_out(#fff, 0.7) 100%
		);
		content: "";
		display: block;
		height: 100%;
		left: -75%;
		position: absolute;
		top: 0;
		transform: skewX(-25deg);
		width: 50%;
		z-index: 9999999999;
	}

	&:hover,
	&:focus {
		&::before {
			animation: shine 0.85s;
		}
	}

	@keyframes shine {
		100% {
			left: 125%;
		}
	}
}

.test-shine {
content: "";
}

.test-shine:after {
  content: "";
  position: absolute;
    top: -50%;
  left: -60%;
  width: 20%;
  height: 200%;
  opacity: 0;
  transform: rotate(30deg);

  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.13) 77%,
    rgba(255, 255, 255, 0.5) 92%,
    rgba(255, 255, 255, 0.0) 100%
  );
}

/* Hover state - trigger effect */
.test-shine:hover:after {
  opacity: 1;
  left: 130%;
  transition-property: left, top, opacity;
  transition-duration: 0.7s, 0.7s, 0.15s;
  transition-timing-function: ease;
}

/* Active state */
.test-shine:active:after {
  opacity: 0;
}

      .toplace{
        background-image: url(/pic/lacey.png);
        margin-bottom: -20px;
        background-size: auto 100%;
        width: 100%;
        height: 20px;
        filter: drop-shadow(0px 1px #D1B9B3);
    }


.link {
        position: relative;
        transition: clip-path 275ms ease;
      }

      .link:hover span::before,
      .link:focus span::before {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
      }

      .link span {
        position: relative;
        display: inline-block;
      }

      .link span::before {
        position: absolute;
        content: attr(data-content);
        text-decoration: underline;
        clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
        transition: clip-path 275ms ease;
      }

      span.dashed::before {
        text-decoration-style: dashed;
        text-decoration-color: #b59589;
text-decoration-thickness: 0.5px;

      }