/* Xenia Supplies: the 2026 Divi look. Pink #f5e4e4 and beige #efe9e4 bands, Playfair Display headings, Inter text,
   arched gallery photo, navy #08314c buttons, white card panels over photo backgrounds, Krona One on Contact. */

body { color: #1f2933; font-size: 16px; }
.site-header { background: #fff; border-bottom: 0; box-shadow: 0 1px 0 rgba(0,0,0,.1); }
.brand img { height: 46px; }
.site-nav a { font: 600 14px/1 "Inter", sans-serif; color: rgba(0,0,0,.6) !important; border-bottom: 0 !important; }
.site-nav a[aria-current="page"], .site-nav a:hover { color: #2ea3f2 !important; }
.xs-wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; position: relative; z-index: 1; }
.xs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: start; }
.xs-h2 { font: 500 clamp(2rem, 3.4vw, 3rem)/1.3 "Playfair Display", serif; color: #000; margin: 0 0 30px; }
.xs-h3 { font: 500 22px/1.4 "Playfair Display", serif; color: #1f2933; margin: 0 0 14px; }
.xs-btn { display: inline-block; background: #08314c; color: #fff; font: 500 14px/1 "Krona One", sans-serif; letter-spacing: 3px; text-transform: uppercase; padding: 16px 22px; text-decoration: none; transition: background .2s; }
.xs-btn:hover { background: #041d2e; }
.xs-why-bg { position: absolute; inset: 0; z-index: 0; }
.xs-why-bg img { width: 100%; height: 100%; object-fit: cover; }

/* home */
.xs-hero { background: #f5e4e4; padding: 34px 0; overflow: hidden; }
.xs-hero-in { display: grid; grid-template-columns: 23fr 39fr 23fr; gap: 3%; align-items: center; }
.xs-hero-tile img { width: 100%; aspect-ratio: 352 / 470; object-fit: cover; display: block; }
.xs-hero-img img { width: 100%; height: auto; display: block; }
.xs-hero-logo img { width: 230px; height: auto; margin-left: 70px; }
.xs-hero-text h1 { font: 500 18px/1.4 "Playfair Display", serif; letter-spacing: 2px; margin: 6px 0 8px; color: #1f2933; }
.xs-hero-text p { font-size: 14px; margin: 0 0 20px; max-width: 470px; }
.xs-intro { padding: 54px 0 40px; }
.xs-intro p { margin: 0 0 16px; font-size: 15px; line-height: 1.8; }
.xs-gallery-band { background: #f5e4e4; padding: 50px 0; }
.xs-gal-row { display: grid; grid-template-columns: 1fr 1fr; align-items: end; background: linear-gradient(90deg, #e5dcdc 10%, transparent 10%); }
.xs-arch { padding-left: 10%; }
.xs-arch img { width: 100%; aspect-ratio: 620 / 306; object-fit: cover; border-radius: 50% 50% 0 0 / 100% 100% 0 0; display: block; }
.xs-gal-wide img { width: 100%; aspect-ratio: 795 / 255; object-fit: cover; display: block; }
.xs-offer { padding: 54px 0; }
.xs-offer h3 { font-size: 18px; color: #4a4a4a; margin: 20px 0 10px; }
.xs-lines { list-style: none; margin: 0; padding: 0; line-height: 1.9; font-weight: 500; }
.xs-offer hr { border: 0; border-top: 2px solid #1f2933; margin: 20px 0 0; }
.xs-offer-pics { display: grid; gap: 28px; justify-items: start; }
.xs-offer-pics a:first-child { width: 100%; box-shadow: 0 0 0 4px #e6f2f5; }
.xs-offer-pics a { display: block; max-width: 100%; }
.xs-offer-pics a:not(:first-child) { width: 52%; }
.xs-offer-pics img { width: 100%; height: auto; display: block; }
.xs-why { position: relative; padding: 0; }
.xs-why-in { display: flex; justify-content: flex-end; }
.xs-why-card { background: #f5efec; width: min(475px, 100%); padding: 10px 0 0 18px; }
.xs-why-card .xs-h2 { margin: 0; }
.xs-sub { font: 500 18px "Playfair Display", serif; margin: 0 0 20px; }
.xs-rule { margin: 0; padding: 18px 0; border-bottom: 2px solid #1f2933; line-height: 1.7; font-weight: 500; }
.xs-multi { background: #f5e4e4; padding: 70px 0 60px; }
.xs-multi-in { max-width: 420px; margin: 0 auto 90px; }
.xs-multi-in h3 { text-align: center; }
.xs-multi-in ul { margin: 0; padding-left: 18px; font-weight: 500; }
.xs-multi-in p { margin: 30px 0 6px; font-weight: 500; }
.xs-closing { font-weight: 500; line-height: 1.8; margin: 0; }
.xs-footer { background: #222; color: #4a4a4a; padding: 40px 16px; text-align: center; font-size: 14px; }
.xs-footer p { margin: 0; color: #888; }

/* about */
.xs-about-logo { text-align: center; padding: 40px 16px 30px; }
.xs-about-logo img { width: 230px; height: auto; }
.xs-about { padding: 20px 0 50px; }
.xs-caps { font: 500 clamp(3rem, 7vw, 100px)/1.1 "Playfair Display", serif; font-variant: small-caps; color: #000; margin: 30px 0 30px; }
.xs-about p { line-height: 1.8; font-weight: 500; font-size: 15px; }
.xs-about img { width: 100%; height: auto; }
.xs-team { position: relative; padding: 80px 0; }
.xs-team-card { background: #f5e4e4; width: min(475px, 100%); padding: 16px 18px; }
.xs-team-card p { margin: 0; line-height: 1.8; font-weight: 500; }

/* products */
.xs-pagehead { position: relative; padding: 110px 0 70px; overflow: hidden; }
.xs-pagehead .xs-why-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.65), rgba(0,0,0,.2)); }
.xs-pagehead h1 { position: relative; color: #f7e5e5; font: 500 48px/1.2 "Playfair Display", serif; margin: 0; }
.xs-beige { background: #efe9e4; padding: 70px 0; }
.xs-beige p { line-height: 1.6; }
.xs-jump ul { margin: 10px 0 0; padding-left: 18px; }
.xs-jump a { color: #2ea3f2; text-decoration: none; }
.xs-thin { border: 0; border-top: 1px solid rgba(0,0,0,.12); margin: 60px 0; }
.xs-block { padding: 60px 0 20px; scroll-margin-top: 80px; }
.xs-sec { font: 600 36px/1.3 "Poppins", sans-serif; color: #c9c1bb; text-align: center; margin: 0; }
.xs-block:first-of-type .xs-sec { color: #1f2933; }
.xs-tick { display: block; width: 46px; height: 3px; background: #f0a050; margin: 14px auto 36px; }
.xs-gal { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; align-items: start; }
.xs-gal a, .xs-block .xs-2 a, .xs-single a { display: block; }
.xs-gal img, .xs-block .xs-2 img, .xs-single img { width: 100%; height: auto; display: block; }
.xs-single { max-width: 520px; margin: 30px auto 0; }
.xs-block .xs-2 { margin-top: 30px; }

/* contact */
.xs-contact { position: relative; padding: 70px 0; }
.xs-contact-card { background: #fff; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 30px 40px 40px; }
.xs-krona { font: 400 clamp(2rem, 4vw, 50px)/1.2 "Krona One", sans-serif; color: #000; margin: 0 0 20px; }
.xs-co { position: relative; }
.xs-co img { width: 200px; height: auto; opacity: .08; position: absolute; top: -30px; left: 20px; pointer-events: none; }
.xs-contact-card p { font-size: 14px; line-height: 1.6; color: #4a4a4a; }
.xs-contact-card a { color: #2ea3f2; }
.xs-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; padding: 0; background: none; border: 0; box-shadow: none; }
.xs-form .field { margin: 0; }
.xs-form .field span { font: 500 14px "Montserrat", sans-serif; color: #000; }
.xs-form input, .xs-form textarea { border: 0; border-bottom: 1px solid #000; border-radius: 0; background: transparent; padding: 8px 0; font: 500 14px "Montserrat", sans-serif; }
.xs-full { grid-column: 1 / -1; margin: 0; }
.xs-submit { text-align: right; }
.xs-submit button { background: #f5e4e4; color: #08314c; border: 0; padding: 14px 24px; font: 400 14px "Krona One", sans-serif; letter-spacing: 4px; text-transform: uppercase; cursor: pointer; }
.xs-submit button:hover { background: #08314c; color: #fff; }

@media (max-width: 860px) {
  .xs-hero-in { grid-template-columns: 1fr; }
  .xs-hero-tile { display: none; }
  .xs-hero-text { padding: 0 16px; }
  .xs-hero-logo img { margin-left: 0; }
  .xs-2, .xs-contact-card, .xs-gal-row { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .xs-arch { padding: 0 16px; }
  .xs-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .xs-contact-card { padding: 24px 20px; }
  .xs-why { padding: 60px 0; }
  .xs-sec { font-size: 28px; }
  .xs-pagehead h1 { font-size: 34px; }
}
@media (max-width: 520px) { .xs-form { grid-template-columns: minmax(0, 1fr); } }
.xs-about-logo img { display: block; margin: 0 auto; }
.xs-multi-in ul, .xs-jump ul { list-style: disc; }