/* generated by Media/pattern/build_v3.py — do not hand-edit */

:root {
  --pat-awning:      url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='68'%20height='8'%3E%20%3Crect%20width='34'%20height='8'%20fill='%23B29A82'%20opacity='0.16'/%3E%3C/svg%3E");
  --pat-awning-lt:   url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='68'%20height='8'%3E%20%3Crect%20width='34'%20height='8'%20fill='%23F7F3EC'%20opacity='0.38'/%3E%3C/svg%3E");
  --pat-vine-band:   url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='260'%20height='64'%20viewBox='0%200%20260%2064'%3E%20%3Cg%20fill='none'%20stroke='%236B7A58'%20stroke-width='1.05'%20stroke-linecap='round'%3E%20%3Cpath%20d='M0%2034%20C46%2012%2084%2012%20130%2032%20C176%2052%20214%2052%20260%2030'/%3E%20%3C/g%3E%20%3Cg%20fill='%236B7A58'%3E%20%3Cpath%20d='M34%2022%20Q42%2012%2052%2016%20Q44%2026%2034%2022%20Z'/%3E%20%3Cpath%20d='M62%2016%20Q72%208%2081%2014%20Q71%2023%2062%2016%20Z'/%3E%20%3Cpath%20d='M96%2020%20Q106%2014%20114%2022%20Q103%2028%2096%2020%20Z'/%3E%20%3Cpath%20d='M148%2042%20Q158%2034%20167%2040%20Q157%2049%20148%2042%20Z'/%3E%20%3Cpath%20d='M180%2047%20Q190%2040%20199%2047%20Q188%2054%20180%2047%20Z'/%3E%20%3Cpath%20d='M214%2044%20Q224%2036%20233%2042%20Q222%2051%20214%2044%20Z'/%3E%20%3C/g%3E%20%3Cg%20fill='%238C3436'%3E%20%3Cellipse%20cx='130'%20cy='32'%20rx='3.4'%20ry='4.6'/%3E%20%3Cellipse%20cx='4'%20cy='33'%20rx='2.6'%20ry='3.6'/%3E%20%3Cellipse%20cx='256'%20cy='31'%20rx='2.6'%20ry='3.6'/%3E%20%3C/g%3E%3C/svg%3E");
  --pat-vine-band-lt:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='260'%20height='64'%20viewBox='0%200%20260%2064'%3E%20%3Cg%20fill='none'%20stroke='%23A8BE96'%20stroke-width='1.05'%20stroke-linecap='round'%3E%20%3Cpath%20d='M0%2034%20C46%2012%2084%2012%20130%2032%20C176%2052%20214%2052%20260%2030'/%3E%20%3C/g%3E%20%3Cg%20fill='%23A8BE96'%3E%20%3Cpath%20d='M34%2022%20Q42%2012%2052%2016%20Q44%2026%2034%2022%20Z'/%3E%20%3Cpath%20d='M62%2016%20Q72%208%2081%2014%20Q71%2023%2062%2016%20Z'/%3E%20%3Cpath%20d='M96%2020%20Q106%2014%20114%2022%20Q103%2028%2096%2020%20Z'/%3E%20%3Cpath%20d='M148%2042%20Q158%2034%20167%2040%20Q157%2049%20148%2042%20Z'/%3E%20%3Cpath%20d='M180%2047%20Q190%2040%20199%2047%20Q188%2054%20180%2047%20Z'/%3E%20%3Cpath%20d='M214%2044%20Q224%2036%20233%2042%20Q222%2051%20214%2044%20Z'/%3E%20%3C/g%3E%20%3Cg%20fill='%23D8A29C'%3E%20%3Cellipse%20cx='130'%20cy='32'%20rx='3.4'%20ry='4.6'/%3E%20%3Cellipse%20cx='4'%20cy='33'%20rx='2.6'%20ry='3.6'/%3E%20%3Cellipse%20cx='256'%20cy='31'%20rx='2.6'%20ry='3.6'/%3E%20%3C/g%3E%3C/svg%3E");
  --scallop-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='30' viewBox='0 0 64 30' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L0 15 A16 16 0 0 0 32 15 A16 16 0 0 0 64 15 L64 0 Z' fill='%23000'/%3E%3C/svg%3E");
  --scallop-mask-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='30' viewBox='0 0 64 30' preserveAspectRatio='none'%3E%3Cg transform='rotate(180 32 15)'%3E%3Cpath d='M0 0 L0 15 A16 16 0 0 0 32 15 A16 16 0 0 0 64 15 L64 0 Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- surfaces ---- */
.p-awning    { background-image: var(--pat-awning);    background-size: 68px 8px; }
.p-awning-lt { background-image: var(--pat-awning-lt); background-size: 68px 8px; }

/* ---- scallop edge ----
   Set --scallop-fill to the colour of whatever section comes NEXT. */
.scallop { position: relative; }
.scallop::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 30px;
  background-color: var(--scallop-fill, #F7F3EC);
  -webkit-mask-image: var(--scallop-mask-up); mask-image: var(--scallop-mask-up);
  -webkit-mask-size: 64px 30px; mask-size: 64px 30px;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
}

/* ---- cartouche ----
   A panel with scalloped top and bottom edges and a hairline inner rule.
   Petite Petal uses this shape once in the hero; here it is a system. */
.cart {
  position: relative;
  background: var(--cart-bg, #FFFFFF);
  padding: clamp(2.75rem, 2rem + 4vw, 5rem) clamp(1.5rem, 1rem + 3vw, 4rem);
  margin-block: 30px;
}
.cart::before, .cart::after {
  content: ""; position: absolute; left: 0; right: 0; height: 30px;
  background-color: var(--cart-bg, #FFFFFF);
  -webkit-mask-image: var(--scallop-mask); mask-image: var(--scallop-mask);
  -webkit-mask-size: 64px 30px; mask-size: 64px 30px;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
}
.cart::before { top: -29px; -webkit-mask-image: var(--scallop-mask-up); mask-image: var(--scallop-mask-up); }
.cart::after  { bottom: -29px; }
/* the hairline that follows the straight sides only */
.cart__rule {
  position: absolute; inset: 14px 14px; border-inline: 1px solid var(--cart-rule, #A2C2DE);
  pointer-events: none;
}
