@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  
  --color-bg: #faf8f4;
  --color-white: #ffffff;
  --color-dark: #38332f;
  --color-text: #5d5751;
  --color-text-light: #89817a;

  --color-accent: #b86f5d;
  --color-accent-light: #ddc1af;
  --color-accent-dark: #925849;

  --color-light: #eee6dc;
  --color-border: #e4ddd4;
  --color-sand: #d8c2a8;
  --color-espresso: #433a34;

  --radius: 0.45rem;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}


body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.025;
  z-index: 999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}


h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-dark);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  line-height: 0.96;
  margin-top: 0;
  margin-bottom: 0;
}

h1 em,
h2 em,
h3 em,
h4 em {
  font-style: italic;
  color: var(--color-accent-dark);
}

h2 {
  font-size: clamp(2.8rem, 5vw, 5.4rem);
  letter-spacing: -0.035em;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}

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

button,
input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

::selection {
  background: var(--color-accent-light);
  color: var(--color-dark);
}


::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-sand);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent-dark);
}


.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 32px;
}

.section-pad {
  padding-block: clamp(5rem, 10vw, 9rem);
}

.section-pad--topless {
  padding-top: 0;
}


.eyebrow {
  display: block;
  margin: 0 0 1.35rem;
  color: var(--color-accent-dark);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}

.eyebrow--light {
  color: rgba(255, 255, 255, 0.72);
}

.section-number {
  color: var(--color-text-light);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hairline {
  display: block;
  width: 52px;
  height: 1px;
  background: var(--color-border);
}


.text-link {
  align-items: center;
  display: inline-flex;
  gap: 0.65rem;
  color: var(--color-dark);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid var(--color-dark);
  padding-bottom: 0.35rem;
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), gap 0.2s var(--ease-out);
}

.text-link:hover {
  color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  gap: 0.95rem;
}

.text-link--light {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.42);
}

.text-link--light:hover {
  color: var(--color-accent-light);
  border-color: var(--color-accent-light);
}


.button {
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1rem 1.35rem;
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  transition: transform 0.16s var(--ease-out), background 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}

.button:active {
  transform: scale(0.97);
}

.button:hover {
  transform: translateY(-2px);
}

.button--dark {
  background: var(--color-dark);
  color: var(--color-white);
}

.button--dark:hover {
  background: var(--color-accent-dark);
  color: var(--color-white);
}

.button--light {
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-dark);
}

.button--light:hover {
  background: var(--color-white);
  color: var(--color-dark);
}

.button--outline {
  border-color: var(--color-dark);
  color: var(--color-dark);
  background: transparent;
}

.button--outline:hover {
  background: var(--color-dark);
  color: var(--color-white);
}


.image-frame {
  overflow: hidden;
  background: var(--color-light);
}

.image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}

.image-frame:hover img {
  transform: scale(1.045);
}


.page-transition {
  animation: softIn 0.45s var(--ease-out) both;
}

@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes softIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroReveal {
  from {
    opacity: 0;
    transform: scale(1.035);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}


@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}





@media (max-width: 680px) {
  .container {
    padding-inline: 20px;
  }
}



body:not(:has(.home-hero)) .page-transition {
  padding-top: 80px;
}

@media (max-width: 680px) {
  body:not(:has(.home-hero)) .page-transition {
    padding-top: 70px;
  }
}

.cart-link{position:relative;background:none;border:0;color:inherit;font-size:1.05rem;padding:.45rem;cursor:pointer}
.cart-badge{position:absolute;top:0;right:-2px;min-width:15px;height:15px;padding:0 3px;border-radius:99px;background:currentColor;color:var(--color-bg,#fff);font:600 9px/15px Montserrat,sans-serif;text-align:center}
#cecilia-cart{position:fixed;inset:0;z-index:2000;pointer-events:none}
#cecilia-cart .cart-overlay{position:absolute;inset:0;background:rgba(0,0,0,.35);opacity:0;transition:opacity .25s}
.cart-drawer{position:absolute;top:0;right:0;width:min(440px,92vw);height:100%;background:var(--color-bg,#f7f5f0);transform:translateX(100%);transition:transform .3s ease;display:flex;flex-direction:column;padding:2rem;box-shadow:-20px 0 50px rgba(0,0,0,.12)}
#cecilia-cart.is-open{pointer-events:auto}
#cecilia-cart.is-open .cart-overlay{opacity:1}
#cecilia-cart.is-open .cart-drawer{transform:translateX(0)}
.cart-drawer__header{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid rgba(0,0,0,.12);padding-bottom:1.25rem}
.cart-drawer__header h2{margin:0;font-size:2rem}.cart-close{background:none;border:0;font-size:1.2rem;cursor:pointer;padding:.5rem}
.cart-items{flex:1;overflow:auto;padding:1rem 0}.cart-item{display:flex;gap:1rem;padding:1rem 0;border-bottom:1px solid rgba(0,0,0,.1)}
.cart-item img{width:90px;height:100px;object-fit:cover}.cart-item__info{flex:1}.cart-item__info h3{font-size:1rem;margin:0 0 .35rem}.cart-item__info p{margin:0 0 .8rem}
.cart-item__controls{display:flex;align-items:center;gap:.5rem}.cart-item__controls button:not(.cart-remove){width:28px;height:28px;border:1px solid rgba(0,0,0,.2);background:transparent;cursor:pointer}.cart-remove{border:0;background:none;text-decoration:underline;font-size:.72rem;margin-left:auto;cursor:pointer}
.cart-drawer__footer{border-top:1px solid rgba(0,0,0,.12);padding-top:1.25rem}.cart-total{display:flex;justify-content:space-between;margin-bottom:1rem}.cart-inquiry{display:flex;justify-content:center;width:100%}.cart-empty{text-align:center;padding:4rem 1rem}.cart-empty h3{font-size:1.8rem}
.add-to-cart{margin-top:1rem;border:1px solid currentColor;background:transparent;padding:.65rem 1rem;font:500 .72rem Montserrat,sans-serif;letter-spacing:.04em;cursor:pointer;transition:.2s}.add-to-cart:hover{background:var(--color-text,#222);color:var(--color-bg,#fff)}


.image-frame img,
.category-card__image,
.product-card__image {
  display: block;
  max-width: 100%;
}

.image-frame img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}