@font-face {
  font-family: "Great Vibes";
  src: url("fonts/great-vibes-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root{color-scheme:light;--ink:#302236;--muted:#66566d;--lilac:#eee4f0;--wash:#f1e8f3;--line:#ded0e2;--gold:#916633;--plum:#442a49}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--wash);color:var(--ink);font:16px/1.55 system-ui,sans-serif}
button,input{font:inherit}
button,a{touch-action:manipulation}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
h1,h2,h3,.wordmark{font-family:Georgia,serif;font-weight:400;margin:0}
.site-header{min-height:72px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:.6rem clamp(1rem,5vw,5rem);border-bottom:1px solid var(--line)}
.wordmark{text-decoration:none;text-transform:uppercase;letter-spacing:.17em;font-size:clamp(1.2rem,3.5vw,1.85rem);color:#674b31}
.header-wordmark { display: block; width: clamp(145px, 21vw, 223px); line-height: 0; }
.header-wordmark svg, .footer-wordmark svg { display: block; width: 100%; height: auto; }
.footer-wordmark { display: inline-block; width: 5.58em; vertical-align: top; line-height: 0; }
@media (max-width: 650px) { .header-wordmark { width: min(172px, 46vw); } }
.icon-button{display:inline-grid;place-items:center;width:42px;height:42px;padding:0;background:none;border:0;color:inherit;font-size:1.7rem;line-height:1}
.icon-button svg{width:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.header-actions{justify-self:end;display:flex;align-items:center}
.bag{position:relative}
.bag span{position:absolute;right:0;top:0;display:grid;place-items:center;background:var(--plum);color:white;border-radius:50%;min-width:16px;height:16px;font-size:10px}
.hero{display:grid;grid-template-columns:1fr 1fr;background:#e7d9eb;min-height:480px}
.hero-content{align-self:center;padding:clamp(2rem,7vw,7rem)}
.eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:#664b35}
.hero h1{font-size:clamp(3.25rem,7.4vw,7rem);line-height:1.08;margin:.15em 0 .23em;padding:.14em .07em .1em .16em}
.hero em{color:#644968}
.button{display:inline-block;border:1px solid var(--plum);padding:.65rem 1rem;text-decoration:none}
.primary{background:var(--plum);color:white}
.embroidered-frame {
  align-items: center;
  justify-content: center;
  gap: clamp(.35rem, 2vw, .65rem);
  border: 1px solid #d9c3d6;
  border-radius: 999px;
  background: linear-gradient(110deg, #f3e9f3, #e6d3ea 53%, #f5edf3);
  color: #442a49;
  text-align: center;
}
.embroidered-frame::before, .embroidered-frame::after {
  content: "";
  width: clamp(24px, 7vw, 36px);
  height: 25px;
  flex: none;
  background: url("collection-embroidery.svg?v=fleurs-lilas") center / contain no-repeat;
}
.embroidered-frame::after { transform: scaleX(-1); }
.button.embroidered-frame {
  display: inline-flex;
  max-width: 100%;
  padding: .66rem clamp(.5rem, 2vw, .9rem);
}
.button.embroidered-frame:hover {
  background: #e9d8ed;
}
.button.collection-button {
  position: relative;
  min-height: 3.5rem;
  padding: .95rem 1.65rem;
  border-color: transparent;
}
.button.collection-button::before,
.button.collection-button::after { content: none; }
.collection-border-art {
  position: absolute;
  inset: -13px -14px;
  width: calc(100% + 28px);
  height: calc(100% + 26px);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .collection-reflection-ready .collection-reflection-sweep {
    animation: collection-reflection-sweep 1s linear 2;
  }
}
.collection-logo-flower-image { filter: brightness(1.12) contrast(1.08) saturate(1.14); }
@keyframes collection-reflection-sweep {
  to { transform: translateX(418px); }
}
.carousel{--carousel-counter-height: 1.65rem;position:relative;min-height:480px;background:#e7d9eb}
.carousel img{display:block;width:100%;height:calc(100% - var(--carousel-counter-height));position:absolute;inset:0;object-fit:contain}
.carousel-controls{position:absolute;background:#2d2132eb;color:#fff}
.video-coming{position:absolute;top:.65rem;right:.65rem;padding:.3rem .6rem;background:#2d2132eb;color:#fff;border-radius:30px;font-size:.75rem;white-space:nowrap;pointer-events:none}
.carousel-controls{display:flex;align-items:center;gap:.2rem;bottom:0;left:50%;transform:translateX(-50%);border-radius:30px;height:var(--carousel-counter-height);padding:0 .65rem;white-space:nowrap;font-size:.8rem}
.shipping {
  display: flex;
  width: fit-content;
  max-width: calc(100% - 1.5rem);
  margin: 1rem auto;
  padding: .7rem clamp(.6rem, 3vw, 1.25rem);
  font-size: .9rem;
  letter-spacing: .045em;
}
/* The shipping banner and purchase button share the flower cutout from the logo. */
.shipping.embroidered-frame::before,
.shipping.embroidered-frame::after {
  width: clamp(38px, 12vw, 53px);
}
.shipping.embroidered-frame::before,
.shipping.embroidered-frame::after,
.product-purchase .button.embroidered-frame::before,
.product-purchase .button.embroidered-frame::after {
  height: auto;
  aspect-ratio: 228 / 142;
  background: url("asmirel-logo.jpeg") 53.45% 33.61% / 150.88% auto no-repeat;
  clip-path: polygon(0.00% 28.17%, 3.07% 22.54%, 7.89% 17.61%, 14.04% 14.79%, 20.61% 14.08%, 27.19% 18.31%, 33.33% 28.17%, 36.40% 11.97%, 39.04% 5.63%, 43.42% 1.41%, 46.49% 0.00%, 51.75% 4.93%, 55.26% 13.38%, 57.02% 29.58%, 61.84% 26.06%, 67.98% 25.35%, 72.81% 18.31%, 78.51% 16.20%, 83.33% 8.45%, 82.02% 18.31%, 79.82% 26.06%, 76.75% 31.69%, 77.19% 45.07%, 82.46% 39.44%, 88.60% 36.62%, 93.42% 38.03%, 99.56% 44.37%, 92.54% 45.77%, 87.72% 52.82%, 82.02% 56.34%, 87.72% 61.27%, 83.77% 70.42%, 78.95% 76.06%, 71.93% 78.17%, 67.11% 78.17%, 71.49% 82.39%, 75.88% 86.62%, 78.51% 97.18%, 71.93% 93.66%, 66.23% 88.73%, 59.21% 87.32%, 51.75% 83.10%, 45.61% 82.39%, 40.79% 88.03%, 35.53% 92.96%, 30.70% 99.30%, 28.07% 92.96%, 26.32% 85.21%, 27.63% 79.58%, 22.81% 85.92%, 17.98% 92.25%, 12.72% 100.00%, 13.60% 88.73%, 16.23% 79.58%, 21.49% 72.54%, 26.75% 71.13%, 30.26% 67.61%, 23.68% 66.20%, 19.30% 60.56%, 16.23% 53.52%, 13.60% 48.59%, 17.54% 42.96%, 23.68% 36.62%, 20.18% 34.51%, 14.47% 28.87%, 8.33% 26.06%, 3.95% 26.06%);
  filter: brightness(1.12) contrast(1.08) saturate(1.14);
}
.welcome{padding:3rem max(1.2rem,calc((100% - 800px)/2));display:grid;grid-template-columns:minmax(150px,185px) minmax(0,1fr);align-items:center;gap:clamp(1.3rem,6vw,4rem);background:linear-gradient(135deg,#dbccdf,#eee3ef 62%,#e5d6e9)}
.welcome img{display:block;width:100%;height:auto;border-radius:95px 95px 2px 2px}
h2{font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.08;letter-spacing:-.035em}
.welcome p{color:var(--muted);margin:.9rem 0 0}
.collection{border-top:1px solid var(--line);max-width:950px;padding:3rem clamp(1rem,4vw,2.6rem) 4rem;margin:auto;scroll-margin-top:1rem}
.collection-heading{text-align:center}
.collection-heading p,.muted{color:var(--muted);font-size:.87rem}
.collection-tools{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1.5rem 0}
.filters { display: flex; flex-wrap: wrap; gap: .6rem; }
.filters button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8f0f8;
  color: var(--plum);
  font-size: .8rem;
  padding: .5rem .75rem;
}
.filters button[aria-pressed=true] {
  background: #e6d3ea;
  border-color: #a77eab;
  font-weight: 600;
}
.search-label,.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#search{width:min(220px,100%);border:1px solid var(--line);background:white;padding:.55rem .7rem;color:var(--ink);font-size:.9rem}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem clamp(.75rem,4vw,2.5rem)}
.grid article:last-child:nth-child(odd){grid-column:1/-1;width:calc((100% - clamp(.75rem,4vw,2.5rem))/2);justify-self:center}
.product-open{display:block;width:100%;text-align:left;background:none;border:0;padding:0;color:inherit}
.swatch{aspect-ratio:1.2;display:grid;place-items:center;border:1px solid var(--line);background:linear-gradient(135deg,#ffffff42,transparent 55%,#00000029),var(--color);position:relative}
.swatch::after{content:'';position:absolute;inset:11%;border:1px solid #e9c993a0;border-radius:50% 50% 0 0 / 65% 65% 0 0}
.swatch span{padding:.28rem .46rem;background:#2d2132e8;color:white;font-size:.72rem;z-index:1}
.product-open h3{margin:.65rem 0 0;font-size:clamp(1.45rem,3.8vw,2.35rem);line-height:1.25;padding-inline:2px}
.product-row,.cart-total{display:flex;align-items:center;justify-content:space-between;gap:.45rem}
.product-row{margin-top:.28rem}
.price{font-weight:650;font-variant-numeric:tabular-nums}
.add{min-width:38px;min-height:38px;border:1px solid #b29bb6;background:var(--lilac);color:var(--plum);font-size:1.35rem;line-height:1}
footer{text-align:center;background:var(--lilac);padding:2.5rem 1rem}
footer h2{font-size:1.35rem;margin:.7rem 0}
footer p{margin:.3rem}
.footer-socials {
  display: grid;
  gap: .65rem;
  width: max-content;
  margin: 1rem auto;
  padding: 0;
  list-style: none;
  text-align: left;
}
.footer-socials li { display: flex; align-items: center; gap: .65rem; }
.footer-socials svg { width: 22px; height: 22px; flex: none; color: var(--plum); margin-inline: 7px; }
.instagram-mark {
  display: grid;
  place-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  overflow: hidden;
  border-radius: 7px;
}
.instagram-mark img { display: block; width: 64px; height: auto; max-width: none; }
dialog{width:min(440px,calc(100% - 1.5rem));border:1px solid var(--line);padding:1.15rem;color:var(--ink);background:var(--wash)}
dialog::backdrop{background:#20142599}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.8rem}
.dialog-heading h2{font-size:2rem}
.menu nav{display:grid}
.menu nav a{padding:.7rem 0;border-bottom:1px solid var(--line);text-decoration:none}
.socials{display:inline-block;margin-top:1rem;font-size:.85rem}
.cart-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(.35rem, 2vw, .8rem);
  padding: .55rem 0;
  border-bottom: 1px solid var(--line);
}
.cart-quantity {
  display: flex;
  align-items: center;
  gap: .25rem;
  font-variant-numeric: tabular-nums;
}
.cart-quantity span { min-width: 1.5ch; text-align: center; }
.cart-quantity button {
  width: 36px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--lilac);
  color: var(--plum);
  font-size: 1.15rem;
}
.cart-subtotal { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cart-size {
  grid-column: 1 / -1;
  justify-self: start;
  max-width: 100%;
  min-height: 36px;
  padding: .3rem .55rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--wash);
  color: var(--muted);
  font-size: .85rem;
  opacity: 1;
}
@media(max-width:650px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-content{padding:2rem 1.15rem}
  .carousel{min-height:0;aspect-ratio:3 / 4}
  .welcome{grid-template-columns:1fr;text-align:center;padding:2.2rem 1.2rem}
  .welcome img{max-width:150px;justify-self:center}
  .collection-tools{flex-direction:column;align-items:stretch}
  #search{width:100%}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.hero h1, .welcome h2, .collection-heading h2, .product-open h3, #product-title, .product-summary h3 {
  font-family: "Great Vibes", Georgia, cursive;
  font-weight: 400;
  letter-spacing: normal;
  color: #8b5c30;
}
.hero h1 { padding: 0; }
.hero-title-line { display: block; padding: .14em .07em .1em .16em; }
.hero-title-line + .hero-title-line { margin-top: -.16em; }
.asmirel-name { display: inline-block; white-space: nowrap; }
.asmirel-rest {
  display: inline-block;
  /* Keep the calligraphic final stroke within the clipped gold background. */
  padding-inline: .035em .24em;
  padding-block: .045em;
}
.asmirel-initial {
  position: relative;
  display: inline-block;
  width: .72em;
  height: .81em;
  vertical-align: -.04em;
}
.asmirel-initial svg {
  position: absolute;
  top: -.035em;
  left: -.04em;
  width: 1.94em;
  height: auto;
  pointer-events: none;
}
.welcome h2 { padding-bottom: .25em; }
.welcome h2, .collection-heading h2 { font-size: clamp(2.65rem, 5.6vw, 4rem); line-height: 1.2; }
#product-title { font-size: clamp(2.3rem, 6vw, 3.25rem); line-height: 1.2; }

:root {
  --title-gold-edge: #ecbf88;
  --title-gold-light: #daa563;
  --title-gold-mid: #aa7c41;
  --title-gold-dark: #8b5c30;
  --title-gold-shadow: #704824;
  --title-gold-reflection: #fff7e0;
}

@supports (background-clip: text) {
  .hero-title-line, .welcome-title-text, .collection-heading h2, .product-open h3, #product-title, .product-summary h3 {
    background-image:
      linear-gradient(110deg, transparent 42%, var(--title-gold-reflection) 50%, transparent 58%),
      linear-gradient(180deg, var(--title-gold-edge) 4%, var(--title-gold-light) 24%, var(--title-gold-mid) 53%, var(--title-gold-dark) 78%, var(--title-gold-shadow) 100%);
    background-size: 260% 100%, 100% 100%;
    background-position: 120% 0, center;
    background-repeat: no-repeat;
    background-clip: text;
    color: transparent;
  }
  @media (prefers-reduced-motion: no-preference) {
    .hero-title-line, .welcome-title-text, .collection-heading h2, .product-open h3, #product-title, .product-summary h3 {
      animation: gold-reflection 3.6s linear infinite;
    }
  }
  @keyframes gold-reflection {
    0%, 36% { background-position: 120% 0, center; }
    64%, 100% { background-position: -20% 0, center; }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .asmirel-initial-shine { animation: logo-letter-reflection 3.6s linear infinite; }
}
@keyframes logo-letter-reflection {
  0%, 36% { transform: translateX(0); }
  64%, 100% { transform: translateX(760px); }
}

.language-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .55rem;
  padding: .45rem clamp(1rem, 5vw, 5rem);
  color: var(--muted);
  font-size: .85rem;
}
.language-bar select {
  padding: .25rem .45rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--wash);
  color: var(--ink);
}

.product-card-photo, .gallery-photo {
  display: block;
  width: 100%;
  object-fit: contain;
  background: var(--lilac);
}
.product-card-photo {
  aspect-ratio: 1.2;
  height: auto;
  border: 1px solid var(--line);
  object-fit: cover;
  object-position: center 16%;
}
html:has(#product.has-gallery[open]) { overflow: hidden; }
#product.has-gallery[open] {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: max(.65rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) max(.65rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
  border: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
#product .dialog-heading {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
  gap: .35rem;
  margin-bottom: .45rem;
}
#product-title {
  grid-column: 2;
  margin: 0;
  text-align: center;
  font-size: clamp(1.65rem, 5vw, 3.25rem);
}
#product .dialog-heading form { justify-self: end; }
.product-close { font-size: 1.15rem; }
.product-close span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.product-close:focus-visible { outline: none; }
.product-close:focus-visible span { outline: 2px solid var(--gold); }
#product.has-gallery #product-content {
  display: grid;
  --gallery-height: calc(clamp(13rem, 68dvh, 48rem) - 16px);
  --gallery-counter-height: 30px;
  --gallery-gap: 2px;
  --gallery-photo-width: calc((var(--gallery-height) - var(--gallery-counter-height) - var(--gallery-gap)) * .666875);
  grid-template-rows: var(--gallery-height) repeat(3, auto);
  min-height: 0;
  overflow-y: auto;
}
.product-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gallery-gap);
  min-height: 0;
}
.gallery-photo, .product-gallery-controls {
  width: min(100%, max(var(--gallery-counter-height) * 2, var(--gallery-photo-width)));
  flex: none;
}
.gallery-photo { height: auto; aspect-ratio: 1067 / 1600; }
.product-gallery-controls {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: var(--gallery-counter-height);
}
.product-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, max-content);
  align-items: start;
  gap: .65rem;
  width: 100%;
  container-type: inline-size;
  padding-inline-start: .25rem;
}
.product-summary h3 { margin: 0; font-size: clamp(1.45rem, 5vw, 2.15rem); line-height: 1.2; }
.product-purchase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
}
.product-summary h3 { padding-inline-start: max(0px, calc((100cqw - 32.5rem) / 2)); }
#product.has-gallery .product-summary h3 {
  padding-inline-start: max(0px, calc((100cqw - max(18rem, var(--gallery-photo-width))) / 2));
}
#product.has-gallery .product-purchase {
  margin-block-start: calc(-1 * var(--gallery-counter-height));
}
.product-purchase .button { font-size: .85rem; }
.product-purchase .button::before,
.product-purchase .button::after { width: clamp(23px, 7.5vw, 34px); }
.product-photo-count { min-width: 4ch; text-align: center; font-variant-numeric: tabular-nums; }

#slide, .gallery-photo {
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.product-shipping { margin: .65rem auto; text-align: center; color: var(--muted); }
.product-details {
  width: min(100%, 32rem);
  margin: 0 auto;
  padding: .8rem 1rem;
  border-top: 1px solid var(--line);
}
.product-details h3 { margin: .55rem 0 .25rem; }
.product-details ul { margin: 0 0 .75rem; padding-left: 1.25rem; }
