/* Base: tokens, reset, canvas */

/* ==========================================================================
   Global Tokens And Canvas
   ========================================================================== */

:root {
  --paper: #fbf3e5;
  --paper-soft: #fff8ef;
  --paper-dark: #ead6b5;
  --paper-line: #e9cfaa;
  --panel-bg: #f7efe7;
  --panel-soft: #fffaf5;
  --ink: #3a312d;
  --muted: #66554d;
  --rose: #c83f68;
  --rose-dark: #aa2c59;
  --shadow: rgba(104, 67, 40, 0.12);
  --card-shadow: 0 10px 20px rgba(90, 58, 34, 0.1);
  --kd-shell-line: rgba(191, 152, 112, 0.2);
  --kd-shell-shadow: 0 18px 40px rgba(116, 80, 47, 0.12);
  --kd-paper-light: #fcf3df;
  --kd-paper-mid: #f6e8cb;
  --kd-paper-deep: #efdcb6;
  --kd-frame-soft: rgba(121, 85, 59, 0.1);
  --kd-ink: #453631;
  --kd-muted: #000;
  --kd-rose: #d65b86;
  --kd-rose-dark: #a9456a;
  --kd-loop-price-color: #8f2648;
  --kd-loop-price-label-size: 13px;
  --kd-loop-price-amount-size: 21px;

}

* {
  box-sizing: border-box;
}

body {
    position: relative;
    margin: 62px 0px 0px 0px;
    min-height: 100vh;
   /* background: url(../images/inner2.jpg) repeat center top fixed;
    background-size: auto, 640px auto, auto; */
	
    color: var(--ink);
    font-family: "Cormorant Garamond", serif;
}

body::before, body::after {
    content: "";
    position: absolute;
    top: -100px;
    width: max(450px, 18vw);
    height: min(58vw, 800px);
    pointer-events: none;
    z-index: 100;
    opacity: 1;
    background-repeat: no-repeat;
    background-size: contain;
}

body::before {
    left: max(8px, calc(50% - 800px));
    background-image: url(../images/floral-side-left.webp);
    background-position: left top;
	opacity: 0.9; /* adjust 0–1 */
}

body::after {
    right: max(8px, calc(50% - 800px));
  background-image: url(../images/floral-side-right.webp);
  background-position: right top;
  opacity: 0.9; /* adjust 0–1 */
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

.poster {
  position: relative;
  z-index: 1;
  width: min(1280px, 100vw);
  min-height: 100vh;
  margin: 0 auto;
  overflow: visible;
 padding-bottom: 30px;
  background: linear-gradient(to bottom, var(--panel-soft), var(--panel-bg));
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.05),
    0 20px 60px rgba(0, 0, 0, 0.15);
}

.poster::before {
  content: "";
  position: absolute;
  inset: 0px;
  z-index: 0;
  pointer-events: none;
  border: 2px solid rgba(191, 164, 137, 0.92);
  
  background: #f7efe7;
  box-shadow:
    0 0 0 8px rgba(232, 212, 187, 0.95),
    0 0 0 14px rgba(191, 164, 137, 0.5);
}

.poster > * {
  position: relative;
  z-index: 1;
}

.site-footer {
  position: relative;
  z-index: 1;
}

.poster::after {
    content: "";
    position: absolute;
    left: -155px;
    right: -196px;
    bottom: -91px;
    height: 338px;
    pointer-events: none;
    z-index: 100;
    background-image: url(../images/floral-bottom-left.webp), url(../images/floral-bottom-right.webp);
    background-repeat: no-repeat;
    background-size: 500px auto, 500px auto;
    background-position: left bottom, right bottom;
}

@media (max-width: 1100px) {
  body::before,
  body::after {
    width: 500px;
    height: min(52vw, 560px);
  }

  .poster::after {
    left: -32px;
    right: -32px;
    bottom: -120px;
  }
}

@media (max-width: 768px) {
  .poster {
    overflow: hidden;
  }

  .poster::before {
    inset: -10px;
  }

  body::before,
  body::after {
display:none;
  }

  .poster::after {
       display:none;
  }
}