.ax-color-tool-layout {
  /* Layout configuration */
  --ax-layout-gap: var(--spacing-300);
  --ax-layout-row-gap: 0;
  --ax-layout-column-gap: var(--ax-layout-gap);
  --ax-color-tool-presentation-max-width: var(--block-wd-max-width);
  --ax-layout-presentation-max-width: var(--ax-color-tool-presentation-max-width);
  --ax-layout-max-inline-size: var(--ax-layout-presentation-max-width);
  --ax-layout-grid-gutter: var(--ax-grid-gutter, var(--spacing-300));
  --ax-layout-inline-size: 100%;

  /* Grid configuration (desktop) */
  --ax-grid-columns: 1fr auto;
  --ax-grid-areas:
    "sidebar  topbar"
    "sidebar canvas"
    "sidebar  footer";

  /* Slot grid areas */
  --ax-area-topbar: topbar;
  --ax-area-sidebar: sidebar;
  --ax-area-canvas: canvas;
  --ax-area-footer: footer;

  /* Sidebar width */
  --ax-layout-sidebar-width: auto;

  /* Slot backgrounds */
  --ax-bg-topbar: var(--color-white);
  --ax-bg-sidebar: transparent;
  --ax-bg-canvas: var(--color-white);
  --ax-bg-footer: var(--color-white);

  /* Slot padding (mobile) */
  --ax-padding-topbar-mobile: 0;
  --ax-padding-sidebar-mobile: 0;
  --ax-padding-canvas-mobile: 0;

  /* Slot padding (desktop) */
  --ax-padding-topbar-desktop: 0;
  --ax-padding-sidebar-desktop: 0;
  --ax-padding-canvas-desktop: 0;

  /* Z-index layers */
  --ax-z-footer: 10;

  /* Sticky positions */
  --ax-sticky-footer-bottom: 0;

  /* Canvas Styling */
  --ax-slot-canvas-block-size: 100%;

  /* Footer spacing */
  --ax-footer-margin-top: 0;
  --ax-sidebar-span-tablet: 6;
  --ax-canvas-span-tablet: 6;
  --ax-sidebar-span-desktop: 4;
  --ax-canvas-span-desktop: 8;
  --ax-main-column-tablet: 7 / span 6;
  --ax-main-column-desktop: 5 / span 8;

  /* Focus styling */
  --ax-focus-outline-color: transparent;
  --ax-focus-outline-width: 0;
  --ax-focus-outline-offset: 0;

  /* Text content */
  --ax-logo-icon-size: 29px;
  --ax-text-content-gap: var(--spacing-200);
  --ax-text-body-gap: var(--spacing-100);
  --ax-logo-gap: var(--spacing-100);

  box-sizing: border-box;
  padding: 0 var(--spacing-300) var(--spacing-300);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  row-gap: var(--ax-layout-row-gap);
  column-gap: var(--ax-layout-column-gap);
  inline-size: var(--ax-layout-inline-size);
  max-inline-size: var(--ax-color-tool-presentation-max-width);
}

.ax-color-tool-layout--canvas-footer {
  display: flex;
  flex-direction: column;
}

.ax-shell-slot {
  position: relative;
  order: var(--mobile-order);
  min-inline-size: 0;
  box-sizing: border-box;
}

.ax-color-tool-layout--canvas-footer .ax-shell-slot--topbar,
.ax-color-tool-layout--canvas-footer .ax-shell-slot--sidebar {
  display: none;
}

.ax-shell-slot--topbar {
  grid-area: var(--ax-area-topbar);
  background-color: var(--ax-bg-topbar);
  padding: var(--ax-padding-topbar-mobile);
}

.ax-shell-slot--sidebar {
  inline-size: var(--ax-layout-sidebar-width);
  grid-area: var(--ax-area-sidebar);
  background-color: var(--ax-bg-sidebar);
  padding: var(--ax-padding-sidebar-mobile);
}

.ax-shell-slot--canvas {
  grid-area: var(--ax-area-canvas);
  background-color: var(--ax-bg-canvas);
  padding: var(--ax-padding-canvas-mobile);
  block-size: var(--ax-slot-canvas-block-size);
}

.ax-shell-slot--footer {
  grid-area: var(--ax-area-footer);
  background-color: var(--ax-bg-footer);
  margin-block-start: var(--ax-footer-margin-top);
  position: relative;
  bottom: unset;
  z-index: auto;
}

.ax-color-tool-layout[data-layout-variant="default"][data-toolbar-variant="sticky"] .ax-shell-slot--footer {
  position: sticky;
  bottom: var(--ax-sticky-footer-bottom);
  z-index: var(--ax-z-footer);
}

.ax-color-tool-layout[data-layout-variant="canvas-footer"] .ax-shell-slot--footer,
.ax-color-tool-layout[data-toolbar-variant="inline"] .ax-shell-slot--footer,
.ax-color-tool-layout[data-toolbar-variant="sticky-on-scroll"] .ax-shell-slot--footer {
  position: relative;
  bottom: unset;
  z-index: auto;
}

@media (max-width: 1199px) {
  .ax-color-tool-layout[data-toolbar-variant="sticky-on-scroll"] .ax-toolbar-standalone .ax-swatch-strip {
    display: none;
  }

  .ax-color-tool-layout[data-toolbar-variant="sticky-on-scroll"] .ax-toolbar-standalone .ax-palette-name {
    display: flex;
  }
}

.ax-shell-slot:focus-within {
  outline: var(--ax-focus-outline-width) solid var(--ax-focus-outline-color);
  outline-offset: var(--ax-focus-outline-offset);
}

@media (min-width: 600px) {
  .ax-color-tool-layout {
    padding: var(--spacing-400) var(--spacing-500);
  }
}

@media (min-width: 888px) {
  .ax-shell-slot {
    order: unset;
    grid-area: auto;
  }

  .ax-shell-slot--topbar {
    padding: var(--ax-padding-topbar-desktop);
  }

  .ax-shell-slot--sidebar {
    padding: var(--ax-padding-sidebar-desktop);
  }

  .ax-shell-slot--canvas {
    padding: var(--ax-padding-canvas-desktop);
  }
}

@media (min-width: 600px) and (max-width: 887px) {
  .ax-color-tool-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .ax-color-tool-layout--canvas-footer {
    display: flex;
  }

  .ax-shell-slot {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

@media (min-width: 888px) {
  .ax-color-tool-layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--ax-layout-grid-gutter);
    row-gap: var(--ax-layout-gap);
    align-items: start;
  }

  .ax-color-tool-layout--canvas-footer {
    display: flex;
    grid-template-columns: none;
  }

  .ax-shell-slot--topbar {
    grid-column: var(--ax-main-column-tablet);
    grid-row: 1;
  }

  .ax-shell-slot--sidebar {
    grid-column: 1 / span var(--ax-sidebar-span-tablet);
    grid-row: 1 / span 3;
  }

  .ax-shell-slot--canvas {
    grid-column: var(--ax-main-column-tablet);
    grid-row: 2;
  }

  .ax-shell-slot--footer {
    grid-column: var(--ax-main-column-tablet);
    grid-row: 3;
  }
}

@media (min-width: 1200px) {
  .ax-color-tool-layout {
    padding: var(--spacing-600);
  }

  .ax-shell-slot--topbar {
    grid-column: var(--ax-main-column-desktop);
  }

  .ax-shell-slot--sidebar {
    grid-column: 1 / span var(--ax-sidebar-span-desktop);
  }

  .ax-shell-slot--canvas {
    grid-column: var(--ax-main-column-desktop);
  }

  .ax-shell-slot--footer {
    grid-column: var(--ax-main-column-desktop);
  }
}

@media print {
  .ax-color-tool-layout {
    display: block;
  }

  .ax-shell-slot--footer {
    display: none;
  }
}

/* ── Text Content Block ─────────────────────────────────────── */

.ax-text-content {
  display: flex;
  flex-direction: column;
  gap: var(--ax-text-content-gap);
}

.ax-text-content__logo {
  display: flex;
  align-items: center;
  gap: var(--ax-logo-gap);
}

.ax-text-content__logo-icon {
  block-size: var(--ax-logo-icon-size);
  inline-size: auto;
}

.icon.icon-adobe-express-logo {
  padding: 0;
}

.ax-text-content__body {
  display: flex;
  flex-direction: column;
  gap: var(--ax-text-body-gap);
}

.ax-text-content__heading {
  font-family: var(--body-font-family);
  font-size: var(--ax-heading-xl-size);
  font-weight: var(--heading-font-weight-extra);
  line-height: 1.04;
  color: var(--color-default-font);
  margin: 0;
}

.ax-text-content__paragraph {
  font-family: var(--body-font-family);
  font-size: var(--ax-body-s-size);
  font-weight: var(--ax-body-weight);
  line-height: 1.3;
  color: var(--color-dark-gray);
  margin: 0 !important;
}

.icon.icon-adobe-express-logo {
  padding: 0;
}