/* ==========================================================
   898 Block Style Foundation
   ----------------------------------------------------------
   Shared visual tokens extracted from s898-application-solutions.
   Use these tokens for new Gutenberg blocks instead of redefining
   the same fonts, colors, spacing, borders, radii, and shadows in
   every block stylesheet.
   ========================================================== */

:root,
.editor-styles-wrapper {
  /* Font system */
  --s898-font-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --s898-font-heading: "Montserrat", "Segoe UI", Roboto, sans-serif;
  --s898-font-body: "Source Sans 3", "Segoe UI", Roboto, sans-serif;

  /* Premium warm B2B palette */
  --s898-block-bg: linear-gradient(180deg, #fffdfa 0%, #fbf6ee 100%);
  --s898-block-bg-flat: #f8f5ef;
  --s898-block-surface: rgba(255, 252, 247, 0.98);
  --s898-block-surface-strong: #fffdf9;
  --s898-block-chip-bg: rgba(255, 251, 245, 0.88);
  --s898-block-text: #1f1a17;
  --s898-block-muted: #625850;
  --s898-block-muted-light: #9a9088;
  --s898-block-accent: #b27826;
  --s898-block-accent-dark: #9f6312;
  --s898-block-accent-chip: #a76e1d;
  --s898-block-accent-soft: rgba(178, 120, 38, 0.28);
  --s898-block-border: rgba(204, 152, 81, 0.84);
  --s898-block-border-soft: rgba(220, 186, 134, 0.62);
  --s898-block-border-subtle: rgba(191, 151, 82, 0.18);
  --s898-block-chip-border: rgba(223, 189, 140, 0.94);

  /* Width + outer rhythm */
  --s898-block-max-width: 1380px;
  --s898-block-outer-width: min(var(--s898-block-max-width), calc(100vw - 32px));
  --s898-block-outer-width-mobile: min(100%, calc(100vw - 18px));
  --s898-block-section-padding: clamp(26px, 2.5vw, 40px);
  --s898-block-section-padding-mobile: 22px 16px;
  --s898-block-header-gap: 20px;
  --s898-block-header-margin: clamp(16px, 1.6vw, 22px);
  --s898-block-grid-gap: clamp(16px, 1.35vw, 20px);
  --s898-block-card-gap: clamp(14px, 1.15vw, 18px);
  --s898-block-card-padding: clamp(15px, 1.2vw, 18px);
  --s898-block-card-padding-mobile: 18px 16px;
  --s898-block-chip-gap: 7px;
  --s898-block-chip-margin: 12px;
  --s898-block-cta-padding-top: 14px;
  --s898-rhythm-title-bottom: 5px;
  --s898-rhythm-title-desc-gap: 12px;

  /* Radius + depth */
  --s898-block-radius-section: 30px;
  --s898-block-radius-section-mobile: 24px;
  --s898-block-radius-card: 20px;
  --s898-block-radius-button: 17px;
  --s898-block-radius-pill: 999px;
  --s898-block-shadow-card: 0 12px 28px rgba(97, 73, 42, 0.07);
  --s898-block-shadow-section: inset 0 0 0 1px rgba(255, 255, 255, 0.56), 0 8px 26px rgba(112, 88, 52, 0.05);
  --s898-block-shadow-button: 0 8px 20px rgba(164, 126, 79, 0.06);
  --s898-block-focus-ring: 3px solid rgba(178, 120, 38, 0.24);

  /* Type hierarchy extracted from s898-application-solutions */
  --s898-type-eyebrow-size: 0.94rem;
  --s898-type-eyebrow-weight: 700;
  --s898-type-eyebrow-tracking: 0.11em;
  --s898-type-eyebrow-line: 1.2;
  --s898-type-title-size: clamp(2rem, 3.2vw, 3.14rem);
  --s898-type-title-size-mobile: clamp(1.98rem, 8.7vw, 2.78rem);
  --s898-type-title-weight: 400;
  --s898-type-title-line: 0.98;
  --s898-type-title-tracking: -0.03em;
  --s898-type-desc-size: clamp(0.98rem, 1.05vw, 1.1rem);
  --s898-type-desc-line: 1.42;
  --s898-type-card-title-size: clamp(1.7rem, 2vw, 1.95rem);
  --s898-type-card-title-line: 1;
  --s898-type-card-title-tracking: -0.025em;
  --s898-type-card-title-small-size: clamp(1.14rem, 1.18vw, 1.34rem);
  --s898-type-card-title-small-line: 1.02;
  --s898-type-card-desc-size: 0.92rem;
  --s898-type-card-desc-line: 1.34;
  --s898-type-link-size: 0.92rem;
  --s898-type-link-weight: 600;
  --s898-type-button-size: 0.96rem;
  --s898-type-button-weight: 600;
  --s898-type-chip-size: 0.79rem;
  --s898-type-chip-weight: 500;
}

/* ==========================================================================
   898 Unified Block Outer Shell Contract
   --------------------------------------------------------------------------
   All active 898 custom Gutenberg blocks must own their outer width here, not
   through WordPress/Blocksy parent layout rules. This keeps alignwide/alignfull
   blocks visually aligned and prevents parent-theme container styles from
   stretching modules to full width.

   Rules:
   - The block root controls only outer width and horizontal centering.
   - Each block keeps its own padding, border, radius, background and layout.
   - Hero, guide, CTA, contact and content blocks all use the same fixed shell.
   ========================================================================== */

:where(
  .wp-block-s898-application-solutions.s898-application-solutions,
  .wp-block-s898-buyer-resource-notice.s898-buyer-resource-notice,
  .wp-block-s898-buyer-resources-preview.s898-buyer-resources-preview,
  .wp-block-s898-category-cover-hero.s898-category-cover-hero,
  .wp-block-s898-category-next-steps.s898-category-next-steps,
  .wp-block-s898-claw-selection-guide.s898-claw-selection-guide,
  .wp-block-s898-contact-hero.s898-contact-hero,
  .wp-block-s898-core-product-families.s898-core-families-v2,
  .wp-block-s898-decorative-components-selection-guide.s898-decorative-components-selection-guide,
  .wp-block-s898-featured-products.s898-featured-products,
  .wp-block-s898-final-conversion-cta.s898-final-conversion-cta,
  .wp-block-s898-flat-back-selection-guide.s898-flat-back-selection-guide,
  .wp-block-modern-shop-898-child-s898-hero-supply.s898-hero-supply,
  .wp-block-s898-hero-supply.s898-hero-supply,
  .wp-block-s898-how-we-work-timeline.s898-how-we-work-timeline,
  .wp-block-s898-inquiry-form-section.s898-inquiry-form-section,
  .wp-block-s898-point-back-selection-guide.s898-point-back-selection-guide,
  .wp-block-s898-rhinestone-chain-selection-guide.s898-rhinestone-chain-selection-guide,
  .wp-block-s898-sew-on-selection-guide.s898-sew-on-selection-guide,
  .wp-block-s898-why-choose-final.s898-why-final,
  .wp-block-s898-why-contact.s898-why-contact,
  .s898-application-solutions,
  .s898-buyer-resource-notice,
  .s898-buyer-resources-preview,
  .s898-category-cover-hero,
  .s898-category-next-steps,
  .s898-claw-selection-guide,
  .s898-contact-hero,
  .s898-core-families-v2,
  .s898-decorative-components-selection-guide,
  .s898-featured-products,
  .s898-final-conversion-cta,
  .s898-flat-back-selection-guide,
  .s898-hero-supply,
  .s898-how-we-work-timeline,
  .s898-inquiry-form-section,
  .s898-point-back-selection-guide,
  .s898-rhinestone-chain-selection-guide,
  .s898-sew-on-selection-guide,
  .s898-why-final,
  .s898-why-contact
) {
  box-sizing: border-box !important;
  display: block;
  width: var(--s898-block-outer-width) !important;
  max-width: var(--s898-block-max-width) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  min-width: 0;
}

@media (max-width: 780px) {
  :where(
    .wp-block-s898-application-solutions.s898-application-solutions,
    .wp-block-s898-buyer-resource-notice.s898-buyer-resource-notice,
    .wp-block-s898-buyer-resources-preview.s898-buyer-resources-preview,
    .wp-block-s898-category-cover-hero.s898-category-cover-hero,
    .wp-block-s898-category-next-steps.s898-category-next-steps,
    .wp-block-s898-claw-selection-guide.s898-claw-selection-guide,
    .wp-block-s898-contact-hero.s898-contact-hero,
    .wp-block-s898-core-product-families.s898-core-families-v2,
    .wp-block-s898-decorative-components-selection-guide.s898-decorative-components-selection-guide,
    .wp-block-s898-featured-products.s898-featured-products,
    .wp-block-s898-final-conversion-cta.s898-final-conversion-cta,
    .wp-block-s898-flat-back-selection-guide.s898-flat-back-selection-guide,
    .wp-block-modern-shop-898-child-s898-hero-supply.s898-hero-supply,
    .wp-block-s898-hero-supply.s898-hero-supply,
    .wp-block-s898-how-we-work-timeline.s898-how-we-work-timeline,
    .wp-block-s898-inquiry-form-section.s898-inquiry-form-section,
    .wp-block-s898-point-back-selection-guide.s898-point-back-selection-guide,
    .wp-block-s898-rhinestone-chain-selection-guide.s898-rhinestone-chain-selection-guide,
    .wp-block-s898-sew-on-selection-guide.s898-sew-on-selection-guide,
    .wp-block-s898-why-choose-final.s898-why-final,
    .wp-block-s898-why-contact.s898-why-contact,
    .s898-application-solutions,
    .s898-buyer-resource-notice,
    .s898-buyer-resources-preview,
    .s898-category-cover-hero,
    .s898-category-next-steps,
    .s898-claw-selection-guide,
    .s898-contact-hero,
    .s898-core-families-v2,
    .s898-decorative-components-selection-guide,
    .s898-featured-products,
    .s898-final-conversion-cta,
    .s898-flat-back-selection-guide,
    .s898-hero-supply,
    .s898-how-we-work-timeline,
    .s898-inquiry-form-section,
    .s898-point-back-selection-guide,
    .s898-rhinestone-chain-selection-guide,
    .s898-sew-on-selection-guide,
    .s898-why-final,
    .s898-why-contact
  ) {
    width: var(--s898-block-outer-width-mobile) !important;
    max-width: var(--s898-block-outer-width-mobile) !important;
  }
}

/* ==========================================================================
   898 Parent Theme Neutralizer + Title Rhythm Contract
   --------------------------------------------------------------------------
   Scoped reset for active 898 custom blocks only. This prevents Blocksy /
   WordPress default heading, paragraph, list and figure margins from changing
   the approved block layouts, while keeping block-specific CSS free to define
   its own grid, media, padding and responsive exceptions.
   ========================================================================== */

:where(
  .s898-application-solutions,
  .s898-buyer-resource-notice,
  .s898-buyer-resources-preview,
  .s898-category-cover-hero,
  .s898-category-next-steps,
  .s898-claw-selection-guide,
  .s898-contact-hero,
  .s898-core-families-v2,
  .s898-decorative-components-selection-guide,
  .s898-featured-products,
  .s898-final-conversion-cta,
  .s898-flat-back-selection-guide,
  .s898-hero-supply,
  .s898-how-we-work-timeline,
  .s898-inquiry-form-section,
  .s898-point-back-selection-guide,
  .s898-rhinestone-chain-selection-guide,
  .s898-sew-on-selection-guide,
  .s898-why-final,
  .s898-why-contact
) {
  font-family: var(--s898-font-body);
  color: var(--s898-block-text);
}

:where(
  .s898-application-solutions,
  .s898-buyer-resource-notice,
  .s898-buyer-resources-preview,
  .s898-category-cover-hero,
  .s898-category-next-steps,
  .s898-claw-selection-guide,
  .s898-contact-hero,
  .s898-core-families-v2,
  .s898-decorative-components-selection-guide,
  .s898-featured-products,
  .s898-final-conversion-cta,
  .s898-flat-back-selection-guide,
  .s898-hero-supply,
  .s898-how-we-work-timeline,
  .s898-inquiry-form-section,
  .s898-point-back-selection-guide,
  .s898-rhinestone-chain-selection-guide,
  .s898-sew-on-selection-guide,
  .s898-why-final,
  .s898-why-contact
) :where(h1, h2, h3, h4, h5, h6, p, figure, ul, ol, dl) {
  margin-block-start: 0;
  margin-block-end: 0;
  padding: 0;
}

:where(
  .s898-application-solutions,
  .s898-buyer-resource-notice,
  .s898-buyer-resources-preview,
  .s898-category-cover-hero,
  .s898-category-next-steps,
  .s898-claw-selection-guide,
  .s898-contact-hero,
  .s898-core-families-v2,
  .s898-decorative-components-selection-guide,
  .s898-featured-products,
  .s898-final-conversion-cta,
  .s898-flat-back-selection-guide,
  .s898-hero-supply,
  .s898-how-we-work-timeline,
  .s898-inquiry-form-section,
  .s898-point-back-selection-guide,
  .s898-rhinestone-chain-selection-guide,
  .s898-sew-on-selection-guide,
  .s898-why-final,
  .s898-why-contact
) :where(a) {
  color: inherit;
  text-decoration: none;
}

:where(
  .s898-application-solutions,
  .s898-buyer-resource-notice,
  .s898-buyer-resources-preview,
  .s898-category-cover-hero,
  .s898-category-next-steps,
  .s898-claw-selection-guide,
  .s898-contact-hero,
  .s898-core-families-v2,
  .s898-decorative-components-selection-guide,
  .s898-featured-products,
  .s898-final-conversion-cta,
  .s898-flat-back-selection-guide,
  .s898-hero-supply,
  .s898-how-we-work-timeline,
  .s898-inquiry-form-section,
  .s898-point-back-selection-guide,
  .s898-rhinestone-chain-selection-guide,
  .s898-sew-on-selection-guide,
  .s898-why-final,
  .s898-why-contact
) :where(img, svg, video) {
  max-width: 100%;
}

.s898-application-solutions__title,
.s898-buyer-resource-notice__title,
.s898-buyer-resources-preview__title,
.s898-category-next-steps__title,
.s898-contact-hero__title,
.s898-core-families-v2__title,
.s898-featured-products__title,
.s898-final-conversion-cta__title,
.s898-how-we-work-timeline__title,
.s898-inquiry-form-section__title,
.s898-why-final__title,
.s898-why-contact__title,
.s898-flat-back-selection-guide__title,
.s898-point-back-selection-guide__title,
.s898-claw-selection-guide__title,
.s898-sew-on-selection-guide__title,
.s898-decorative-components-selection-guide__title,
.s898-rhinestone-chain-selection-guide__title {
  margin-block-end: var(--s898-rhythm-title-bottom);
}