.custom-design-guide-colors-section{container-type:inline-size}.custom-design-guide-colors__card{background-color:#fff;border-radius:40px;overflow:hidden;color:#333}.custom-design-guide-colors__card-header{background-color:#fbfbfb;border-bottom:2px solid #f2f2f2;padding:2.5rem 2.5rem 2rem}.custom-design-guide-colors__card-title{font-family:var(--font-body--family);font-style:normal;font-weight:700;font-size:2rem;line-height:1.2;color:#333;margin:0}.custom-design-guide-colors__card-body{padding:2.5rem}.custom-design-guide-colors__layout{display:flex;flex-direction:column;gap:2rem}@media screen and (min-width:990px){.custom-design-guide-colors__layout{flex-direction:row;align-items:flex-start;gap:2.5rem}}.custom-design-guide-colors__schemes{display:flex;flex-direction:column;gap:3rem;flex:1;min-width:0}.custom-design-guide-colors__scheme{display:flex;flex-direction:column;gap:1.5rem}.custom-design-guide-colors__scheme-title{font-family:var(--font-body--family);font-style:normal;font-weight:700;font-size:1.75rem;line-height:1.2;color:#333;margin:0}.custom-design-guide-colors__columns{display:grid;grid-template-columns:1fr;gap:1.5rem}@media screen and (min-width:750px)and (max-width:989px){.custom-design-guide-colors__columns{grid-template-columns:repeat(3,1fr);gap:2rem}}@media screen and (min-width:1440px){.custom-design-guide-colors__columns{grid-template-columns:repeat(3,1fr);gap:2rem}}.custom-design-guide-colors__column{display:flex;flex-direction:column;gap:1rem}.custom-design-guide-colors__column-title{font-family:var(--font-body--family);font-style:normal;font-weight:700;font-size:1.25rem;line-height:1.2;color:#333;margin:0}.custom-design-guide-colors__swatches{display:flex;flex-direction:column;gap:.75rem;list-style:none;margin:0;padding:0}.custom-design-guide-colors__swatch-item{display:flex;flex-direction:row;align-items:center;gap:.75rem}.custom-design-guide-colors__swatch{width:48px;height:48px;border-radius:10px;border:1px solid #e0e0e0;flex-shrink:0;display:block}.custom-design-guide-colors__swatch-name{font-family:var(--font-body--family);font-weight:500;font-size:.875rem;line-height:1.4;color:#767676}.custom-design-guide-colors__previews{display:flex;flex-direction:column;gap:1.5rem}@media screen and (min-width:990px){.custom-design-guide-colors__previews{flex:0 0 520px;width:520px}}@media screen and (min-width:1440px){.custom-design-guide-colors__previews{flex:0 0 609px;width:609px}}.custom-design-guide-colors__preview{background-color:var(--color-background);border:1px solid var(--color-border);border-radius:1.25rem;padding:2rem;display:flex;flex-direction:column;gap:1rem}.custom-design-guide-colors__preview-heading{font-family:var(--font-body--family);font-style:normal;font-weight:700;font-size:1.5rem;line-height:1.2;color:var(--color-foreground-heading);margin:0}.custom-design-guide-colors__preview-body{font-family:var(--font-body--family);font-style:normal;font-size:1rem;line-height:1.5;color:var(--color-foreground);margin:0}.custom-design-guide-colors__preview-actions{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:.75rem;margin-top:.5rem}.custom-design-guide-colors__preview-btn{height:48px;padding:0 2rem;border-radius:0;border-width:1px;border-style:solid;font-family:var(--button-font-family-primary);font-style:normal;font-weight:500;font-size:.875rem;line-height:1.2;text-transform:uppercase;text-align:center;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}.custom-design-guide-colors__preview-btn--primary{background-color:var(--color-primary-button-background);color:var(--color-primary-button-text);border-color:var(--color-primary-button-border)}.custom-design-guide-colors__preview-btn--secondary{background-color:var(--color-secondary-button-background);color:var(--color-secondary-button-text);border-color:var(--color-secondary-button-border)}.custom-design-guide-colors__preview-link{font-family:var(--button-font-family-primary);font-style:normal;font-weight:500;font-size:.875rem;line-height:1.2;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;color:var(--color-primary)}@media screen and (max-width:749px){.custom-design-guide-colors__card-header,.custom-design-guide-colors__card-body{padding:1.5rem}.custom-design-guide-colors__card-title,.custom-design-guide-colors__scheme-title{font-size:1.5rem}.custom-design-guide-colors__preview-actions{flex-direction:column}.custom-design-guide-colors__preview{text-align:center}}
/*# sourceMappingURL=/cdn/shop/t/12/assets/custom-design-guide-colors.css.map */
