/* XS Kitchens Designer System v2.7
   Original agency-editorial direction: decisive color blocks, type-led layouts,
   modular grids, flat graphic marks and structured asymmetry. */

:root{
  --xs-red:#EF3340;
  --xs-red-dark:#C81D32;
  --xs-ink:#0B0B0B;
  --xs-paper:#FFFFFF;
  --xs-warm:#F3F1EF;
  --xs-smoke:#D7D2CF;
  --xs-graphite:#626262;
  --xs-yellow:#F4F06A;
  --xs-pink:#F0B4D0;
  --xs-blue:#243AA8;
  --xs-cyan:#47C8D1;
}

/* Style Book / editor canvas */
.editor-styles-wrapper{
  background:var(--xs-paper);
  color:var(--xs-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,Helvetica,sans-serif;
}
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6{
  font-family:Georgia,"Times New Roman",serif;
  letter-spacing:-.045em;
}

/* Designer labels */
.xs-kicker{
  display:inline-block;
  margin-bottom:0.75rem;
  color:var(--xs-red);
  font-size:0.68rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.xs-kicker.is-light{color:#fff}
.xs-index{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:34px;
  padding-inline:8px;
  border:1px solid currentColor;
  font-size:0.7rem;
  font-weight:800;
  letter-spacing:.08em;
}

/* Flat graphic sheets */
.xs-sheet{
  position:relative;
  overflow:hidden;
  border:1px solid var(--xs-ink);
}
.xs-sheet--red{background:var(--xs-red);color:#fff}
.xs-sheet--ink{background:var(--xs-ink);color:#fff}
.xs-sheet--warm{background:var(--xs-warm);color:var(--xs-ink)}
.xs-sheet--paper{background:var(--xs-paper);color:var(--xs-ink)}
.xs-sheet--blue{background:var(--xs-blue);color:#fff}
.xs-sheet--yellow{background:var(--xs-yellow);color:var(--xs-ink)}
.xs-sheet--pink{background:var(--xs-pink);color:var(--xs-ink)}
.xs-sheet--cyan{background:var(--xs-cyan);color:var(--xs-ink)}

/* Display typography */
.xs-display{
  margin:0 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:clamp(4rem,9vw,10rem) !important;
  font-weight:700 !important;
  line-height:.84 !important;
  letter-spacing:-.065em !important;
}
.xs-display--mega{
  font-size:clamp(6rem,14vw,15rem) !important;
}
.xs-display--tight{
  max-width:9ch;
}
.xs-serif{
  font-family:Georgia,"Times New Roman",serif !important;
}

/* Borders / print effects */
.xs-rule-top{border-top:1px solid var(--xs-ink)}
.xs-rule-bottom{border-bottom:1px solid var(--xs-ink)}
.xs-rule-red{border-color:var(--xs-red) !important}
.xs-offset-black{box-shadow:8px 8px 0 var(--xs-ink)}
.xs-offset-red{box-shadow:8px 8px 0 var(--xs-red)}
.xs-no-radius,
.xs-no-radius *{border-radius:0 !important}

/* Media placeholders for patterns */
.xs-media-placeholder{
  min-height:320px;
  display:grid;
  place-items:center;
  border:1px solid var(--xs-ink);
  background:
    linear-gradient(90deg, transparent 49.6%, rgba(11,11,11,.14) 49.7%, rgba(11,11,11,.14) 50.3%, transparent 50.4%),
    linear-gradient(transparent 49.6%, rgba(11,11,11,.14) 49.7%, rgba(11,11,11,.14) 50.3%, transparent 50.4%),
    var(--xs-warm);
  color:var(--xs-graphite);
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:.7rem;
  font-weight:800;
}
.xs-media-placeholder--dark{
  background:
    linear-gradient(90deg, transparent 49.6%, rgba(255,255,255,.14) 49.7%, rgba(255,255,255,.14) 50.3%, transparent 50.4%),
    linear-gradient(transparent 49.6%, rgba(255,255,255,.14) 49.7%, rgba(255,255,255,.14) 50.3%, transparent 50.4%),
    var(--xs-ink);
  color:#fff;
}

/* Decorative designer patterns */
.xs-pattern-stripes{
  background:
    repeating-linear-gradient(
      90deg,
      var(--xs-red) 0 72px,
      var(--xs-paper) 72px 110px,
      var(--xs-ink) 110px 164px,
      var(--xs-yellow) 164px 206px,
      var(--xs-pink) 206px 254px,
      var(--xs-blue) 254px 320px
    );
}
.xs-pattern-checker{
  background-color:var(--xs-warm);
  background-image:
    linear-gradient(45deg,var(--xs-red) 25%,transparent 25%),
    linear-gradient(-45deg,var(--xs-red) 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,var(--xs-ink) 75%),
    linear-gradient(-45deg,transparent 75%,var(--xs-ink) 75%);
  background-size:84px 84px;
  background-position:0 0,0 42px,42px -42px,-42px 0;
}
.xs-pattern-dots{
  background-color:var(--xs-paper);
  background-image:radial-gradient(var(--xs-ink) 1.5px,transparent 1.5px);
  background-size:18px 18px;
}
.xs-pattern-rings{
  background:
    radial-gradient(circle at 72% 50%,
      transparent 0 52px,
      var(--xs-red) 53px 55px,
      transparent 56px 90px,
      var(--xs-red) 91px 93px,
      transparent 94px 130px,
      var(--xs-red) 131px 133px,
      transparent 134px),
    var(--xs-ink);
}
.xs-pattern-bars{
  background:
    linear-gradient(90deg,
      var(--xs-red) 0 18%,
      var(--xs-paper) 18% 36%,
      var(--xs-blue) 36% 53%,
      var(--xs-yellow) 53% 70%,
      var(--xs-pink) 70% 85%,
      var(--xs-ink) 85% 100%);
}

/* Poster compositions */
.xs-poster-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:0;
}
.xs-poster-grid > *{min-width:0}
.xs-poster-main{grid-column:span 8}
.xs-poster-side{grid-column:span 4}
.xs-poster-half{grid-column:span 6}
.xs-poster-third{grid-column:span 4}
.xs-poster-quarter{grid-column:span 3}

/* Pull quote */
.is-style-xs-pull-quote{
  margin-block:2rem;
  padding:1.2rem 0 1.2rem 1.5rem;
  border-left:8px solid var(--xs-red);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2rem,5vw,5rem);
  line-height:.98;
  letter-spacing:-.04em;
}
.is-style-xs-pull-quote cite{
  display:block;
  margin-top:1rem;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* Image variants */
.is-style-xs-square img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
}
.is-style-xs-product-square img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  background:#fff;
}
.is-style-xs-poster-frame{
  padding:12px;
  border:1px solid var(--xs-ink);
  box-shadow:8px 8px 0 var(--xs-red);
}
.is-style-xs-poster-frame img{
  display:block;
}

/* Heading variants */
.is-style-xs-underline{
  padding-bottom:.22em;
  border-bottom:.12em solid var(--xs-red);
}
.is-style-xs-label{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif !important;
  font-size:.68rem !important;
  font-weight:800 !important;
  letter-spacing:.18em !important;
  line-height:1.2 !important;
  text-transform:uppercase;
}

/* Group variants */
.is-style-xs-red-sheet{
  padding:clamp(2rem,5vw,5rem);
  background:var(--xs-red);
  color:#fff;
  border:1px solid var(--xs-ink);
}
.is-style-xs-black-sheet{
  padding:clamp(2rem,5vw,5rem);
  background:var(--xs-ink);
  color:#fff;
}
.is-style-xs-grid-paper{
  padding:clamp(2rem,5vw,5rem);
  border:1px solid var(--xs-ink);
  background:
    linear-gradient(to right,rgba(11,11,11,.08) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(11,11,11,.08) 1px,transparent 1px),
    var(--xs-paper);
  background-size:32px 32px;
}

/* Buttons */
.is-style-xs-outline .wp-block-button__link,
.wp-block-button.is-style-xs-outline .wp-block-button__link{
  background:transparent !important;
  color:var(--xs-ink) !important;
  border:1px solid var(--xs-ink) !important;
}
.is-style-xs-outline .wp-block-button__link:hover,
.wp-block-button.is-style-xs-outline .wp-block-button__link:hover{
  background:var(--xs-ink) !important;
  color:#fff !important;
}
.is-style-xs-black .wp-block-button__link,
.wp-block-button.is-style-xs-black .wp-block-button__link{
  background:var(--xs-ink) !important;
  color:#fff !important;
  border-color:var(--xs-ink) !important;
}

/* Pattern utility sizing */
.xs-pad-s{padding:clamp(1rem,2vw,2rem)}
.xs-pad-m{padding:clamp(2rem,4vw,4rem)}
.xs-pad-l{padding:clamp(3rem,6vw,7rem)}
.xs-min-320{min-height:320px}
.xs-min-460{min-height:460px}
.xs-min-620{min-height:620px}

@media(max-width:900px){
  .xs-poster-main,
  .xs-poster-side,
  .xs-poster-half,
  .xs-poster-third,
  .xs-poster-quarter{grid-column:1/-1}
  .xs-display{font-size:clamp(3.6rem,16vw,7rem) !important}
}


/* v2.8.1 — wide commerce banners */
.is-style-xs-banner img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
}
.is-style-xs-banner-frame{
  padding:12px;
  border:1px solid var(--xs-ink);
  background:var(--xs-paper);
}
.is-style-xs-banner-frame img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
}