/* Dark background preview inside WordPress Block Editor */
.editor-styles-wrapper,
.block-editor-block-list__layout {
  background-color: #0d1117 !important; /* Adjust to match your live page background */
  color: #dbdbdb !important;
}

/* Ensure accordion items stay dark inside the editor 
.editor-styles-wrapper .wp-block-coblocks-accordion-item {
  background: linear-gradient(145deg, rgba(90, 120, 255, 0.075), rgba(90, 120, 255, 0.024)) !important;
}*/


/* ========================================================
   VARIABLES
   ======================================================== */

:root {
    /* RGB triplet for the blue accent used on every panel/button */
    --ds-accent: 90, 120, 255;

    /* Panel look (doc cards, category panels, navigation panel) */
    --ds-radius: 12px;
    --ds-pad: 30px;
    --ds-speed: .2s;
}

/* Panel padding and radius shrink with the screen */
@media screen and (max-width: 900px) { :root { --ds-pad: 26px; } }
@media screen and (max-width: 781px) { :root { --ds-pad: 22px; } }
@media screen and (max-width: 480px) { :root { --ds-pad: 18px; --ds-radius: 10px; } }

/* ========================================================
   SITE-WIDE CONTENT WIDTH
   Normal pages and portfolio posts = 900px
   Homepage portfolio/grid remains controlled by the theme.
   ======================================================== */

html {
    box-sizing: border-box;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    overflow-x: hidden;
}

/* ========================================================
   NORMAL WORDPRESS PAGES
   Exclude the homepage from these rules.
   ======================================================== */

body.page:not(.home) .entry-content,
body.page:not(.home) .page-content,
body.single-jetpack-portfolio .entry-content,
body.single-jetpack-portfolio .page-content,
body.post-type-archive-jetpack-portfolio .entry-content,
body.taxonomy-jetpack-portfolio-type .entry-content,
.type-jetpack-portfolio .entry-content {
    width: 100% !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Prevent individual content elements from exceeding container */

body.page:not(.home) .entry-content > *,
body.page:not(.home) .page-content > *,
body.single-jetpack-portfolio .entry-content > *,
body.single-jetpack-portfolio .page-content > * {
    max-width: 100%;
}

/* Images */

body.page:not(.home) .entry-content img,
body.page:not(.home) .page-content img,
body.single-jetpack-portfolio .entry-content img,
body.single-jetpack-portfolio .page-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Page headers */

body.page:not(.home) .page-header,
body.single-jetpack-portfolio .page-header {
    margin-bottom: 1em;
}

/* Main content area */

body.page:not(.home) .site-main,
body.single-jetpack-portfolio .site-main,
body.single-jetpack-portfolio #primary,
body.single-jetpack-portfolio #main {
    margin-top: 2em;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ========================================================
   DESKTOP
   ======================================================== */

@media screen and (min-width: 901px) {

    body.page:not(.home) .entry-content,
    body.page:not(.home) .page-content,
    body.single-jetpack-portfolio .entry-content,
    body.single-jetpack-portfolio .page-content {
        width: 900px !important;
        max-width: 900px !important;
    }

}

/* ========================================================
   TABLET
   ======================================================== */

@media screen and (max-width: 900px) {

    body.page:not(.home) .entry-content,
    body.page:not(.home) .page-content,
    body.single-jetpack-portfolio .entry-content,
    body.single-jetpack-portfolio .page-content {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 24px;
        padding-right: 24px;
    }

    body.page:not(.home) .entry-content > *,
    body.page:not(.home) .page-content > *,
    body.single-jetpack-portfolio .entry-content > *,
    body.single-jetpack-portfolio .page-content > * {
        max-width: 100% !important;
    }

    body.page:not(.home) .site-main,
    body.single-jetpack-portfolio .site-main {
        margin-top: 1.5em;
    }

}

/* ========================================================
   MOBILE
   ======================================================== */

@media screen and (max-width: 781px) {

    body.page:not(.home) .entry-content,
    body.page:not(.home) .page-content,
    body.single-jetpack-portfolio .entry-content,
    body.single-jetpack-portfolio .page-content {
        padding-left: 18px;
        padding-right: 18px;
    }

    body.page:not(.home) .site-main,
    body.single-jetpack-portfolio .site-main {
        margin-top: 1em;
    }

}

/* ========================================================
   SMALL MOBILE
   ======================================================== */

@media screen and (max-width: 480px) {

    body.page:not(.home) .entry-content,
    body.page:not(.home) .page-content,
    body.single-jetpack-portfolio .entry-content,
    body.single-jetpack-portfolio .page-content {
        padding-left: 14px;
        padding-right: 14px;
    }

}
```

/* ========================================================
   Hide Comments and Portfolio titles
   ======================================================== */


.single-jetpack-portfolio .entry-header {
    display: none;
}

.single-jetpack-portfolio .entry-header {
    display: none;
}

.single-jetpack-portfolio .entry-content {
    margin-top: 0;
    padding-top: 0;
}

.comments-area,
.comment-respond,
#comments {
    display: none !important;
}

/* Hide portfolio post navigation (next/previous links) */
.portfolio-navigation,
.post-navigation,
.nav-links,
.single-portfolio .nav-previous,
.single-portfolio .nav-next {
    display: none !important;
}

/* Hide portfolio tags and post meta tags */
.portfolio-tags,
.post-tags,
.entry-tags,
.tags-links,
.single-portfolio .tags-links {
    display: none !important;
}

/* ========================================================
   PATCH NOTES DETAILS
   Used by:
   - Survival Game Kit V2 Patch Notes
   ======================================================== */

/* ==========================================
   SGK Patch Notes Details Panel Styles
   ========================================== */

/* 1. Outer Container: Completely transparent, no card background */
.sgk-patchnotes-details {
  max-width: 720px;
  margin: 0 auto 14px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 2. Header Summary: Card background, border & hover tint */
.sgk-patchnotes-details > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 16px 20px !important;
  color: #DBDBDB !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer;
  list-style: none;
  
  /* Match base accordion card styling */
  border: 1px solid rgba(90, 120, 255, 0.16) !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, rgba(90, 120, 255, 0.075), rgba(90, 120, 255, 0.024)) !important;
  box-shadow:
    0 8px 26px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    
  transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.15s ease, background 0.15s ease;
}

/* Hide default browser markers */
.sgk-patchnotes-details > summary::-webkit-details-marker {
  display: none;
}
.sgk-patchnotes-details > summary::marker {
  content: "";
}

/* Custom arrow icon (+1px offset) */
.sgk-patchnotes-details > summary::before {
  content: "▶";
  font-size: calc(0.65em + 3px);
  color: #DBDBDB;
  transform: translateY(1px);
  transition: transform 0.2s ease, color 0.15s ease;
  flex-shrink: 0;
}

/* Open State Header Default (unhovered) */
.sgk-patchnotes-details[open] > summary {
  border-color: rgba(90, 120, 255, 0.28) !important;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  color: #ececec !important;
}

/* UNIFIED HOVER STATE: Layers exact 4% hover tint on top of header gradient */
.sgk-patchnotes-details > summary:hover,
.sgk-patchnotes-details[open] > summary:hover {
  border-color: rgba(90, 120, 255, 0.28) !important;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  background: 
    linear-gradient(rgba(90, 120, 255, 0.04), rgba(90, 120, 255, 0.04)),
    linear-gradient(145deg, rgba(90, 120, 255, 0.075), rgba(90, 120, 255, 0.024)) !important;
  color: #ececec !important;
}

/* Open state arrow rotation (+1px offset) */
.sgk-patchnotes-details[open] > summary::before {
  transform: translateY(1px) rotate(90deg);
  color: #ececec;
}

.sgk-patchnotes-details > summary:hover::before {
  color: #ececec;
}

/* 3. Content Area: Clean transparent panel with #DBDBDB text color */
.sgk-patchnotes-details > summary + * {
  margin-top: 10px !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #DBDBDB !important;
}

/* Internal content list margins */
.sgk-patchnotes-details > summary + * ul,
.sgk-patchnotes-details > summary + * ol {
  margin-top: 0.4em;
  margin-bottom: 1em;
}

.sgk-patchnotes-details > summary + * li {
  margin-bottom: 0.35em;
}

/* Remove default top margins from the first nested element */
.sgk-patchnotes-details > summary + * > *:first-child,
.sgk-patchnotes-details > summary + * .wp-block-coblocks-accordion:first-child,
.sgk-patchnotes-details > summary + * .wp-block-coblocks-accordion-item:first-child {
  margin-top: 0 !important;
}

/* Full-width accordion stretch inside content panel */
.sgk-patchnotes-details .wp-block-coblocks-accordion,
.sgk-patchnotes-details .wp-block-coblocks-accordion-item {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Focus cleanup */
.sgk-patchnotes-details > summary:focus,
.sgk-patchnotes-details > summary:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Tighten the top offset of the inner content container */
.sgk-patchnotes-details > summary + * {
  margin-top: 16px !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
	padding-bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Remove default top margins from the first nested element */
.sgk-patchnotes-details > summary + * > *:first-child,
.sgk-patchnotes-details > summary + * .wp-block-coblocks-accordion:first-child,
.sgk-patchnotes-details > summary + * .wp-block-coblocks-accordion-item:first-child {
  margin-top: 0 !important;
}

/* Force child accordions inside details panel to expand fully */
.sgk-patchnotes-details .wp-block-coblocks-accordion,
.sgk-patchnotes-details .wp-block-coblocks-accordion-item {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ========================================================
   SHARED COLUMN LAYOUT
   Gutenberg column rows used by the doc cards, guide links
   and navigation buttons.

   Desktop: equal-width flex columns
   Tablet:  2-column grid
   Mobile:  1-column grid
   ======================================================== */

.ds-doc-row,
.ds-guide-columns,
.ds-category-nav-columns {
    display: flex;
    flex-wrap: wrap !important;
    margin: 0 !important;
}

.ds-doc-row       { gap: 14px !important; margin-bottom: 14px !important; }
.ds-guide-columns { gap: 10px !important; }
.ds-category-nav-columns { gap: 9px !important; }

/*
 * Explicit sizing is needed because the custom gaps otherwise
 * make Gutenberg columns wider than their parent.
 */
.ds-doc-row > .wp-block-column,
.ds-doc-column,
.ds-guide-columns > .wp-block-column,
.ds-category-nav-columns > .wp-block-column {
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
}

@media screen and (min-width: 901px) {

    .ds-doc-row > .wp-block-column,
    .ds-guide-columns > .wp-block-column,
    .ds-category-nav-columns > .wp-block-column {
        flex: 1 1 0 !important;
    }
}

@media screen and (max-width: 900px) {

    .ds-doc-row,
    .ds-guide-columns,
    .ds-category-nav-columns {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 781px) {

    .ds-doc-row,
    .ds-guide-columns,
    .ds-category-nav-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .ds-guide-columns,
    .ds-category-nav-columns {
        gap: 7px !important;
    }
}

/* ========================================================
   SHARED PANELS
   One look for every "card" on the site:
   - .ds-doc-card      (landing page cards)
   - .ds-doc-category  (project documentation panels)
   - .ds-category-nav  (project documentation navigation)
   Change padding / radius / speed in :root at the top.
   ======================================================== */

.ds-doc-card,
.ds-doc-category,
.ds-category-nav {
    width: 100%;
    padding: var(--ds-pad) !important;
    border: 1px solid rgba(var(--ds-accent), .16);
    border-radius: var(--ds-radius);
    background: linear-gradient(
        145deg,
        rgba(var(--ds-accent), .075),
        rgba(var(--ds-accent), .025)
    );
    box-shadow:
        0 8px 26px rgba(0, 0, 0, .04),
        inset 0 1px 0 rgba(255, 255, 255, .05);
    transition:
        border-color var(--ds-speed) ease,
        box-shadow var(--ds-speed) ease;
}

.ds-doc-card:hover,
.ds-doc-category:hover {
    border-color: rgba(var(--ds-accent), .3);
    box-shadow:
        0 12px 30px rgba(0, 0, 0, .07),
        inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* ========================================================
   DOCUMENTATION LANDING PAGE
   Used by:
   - Unreal Engine Documentation
   ======================================================== */

.ds-docs-header {
    width: 100%;
    max-width: 760px;
    margin: 0 auto 65px;
    text-align: center;
}

.ds-docs-title {
    margin: 0 0 18px !important;
    font-size: clamp(40px, 6vw, 68px) !important;
    line-height: .98 !important;
    letter-spacing: -2.5px;
    overflow-wrap: break-word;
}

.ds-docs-intro {
    width: 100%;
    max-width: 650px;
    margin: 0 auto !important;
    font-size: 18px;
    line-height: 1.7;
    opacity: .65;
}

/* DOCUMENTATION CARDS (panel look comes from SHARED PANELS) */

.ds-doc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 205px;
}

.ds-doc-card h3 {
    margin: 0 0 11px !important;
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -.35px;
    overflow-wrap: break-word;
}

.ds-doc-card > p {
    margin: 0 0 24px !important;
    font-size: 14px;
    line-height: 1.6;
    opacity: .62;
}

/* DOCUMENTATION LINK */

.ds-doc-link {
    margin-top: auto;
}

.ds-doc-link .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0;
    background: transparent !important;
    border: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: none;
    transition:
        transform var(--ds-speed) ease,
        opacity var(--ds-speed) ease;
}

.ds-doc-link .wp-block-button__link:hover {
    transform: translateX(4px);
    opacity: .65;
}

/* DOCUMENTATION FOOTER */

.ds-docs-footer {
    width: 100%;
    max-width: 650px;
    margin: 70px auto 0;
    padding-top: 30px;
    border-top: 1px solid currentColor;
    text-align: center;
    opacity: .6;
}

.ds-docs-footer p:first-child {
    margin-bottom: 5px !important;
    font-size: 16px;
    font-weight: 700;
}

.ds-docs-footer p:last-child {
    margin: 0 !important;
    font-size: 14px;
    line-height: 1.6;
}

/* ========================================================
   PROJECT DOCUMENTATION
   Used by:
   - 27337-2
   ======================================================== */

/* CATEGORY PANEL (panel look comes from SHARED PANELS) */

.ds-doc-category {
    margin-bottom: 18px;
}

.ds-category-header {
    margin-bottom: 22px;
}

.ds-category-header h2 {
    margin: 0 0 7px !important;
    font-size: 23px;
    line-height: 1.15;
    letter-spacing: -.5px;
    overflow-wrap: break-word;
}

.ds-category-header p {
    width: 100%;
    max-width: 700px;
    margin: 0 !important;
    font-size: 14px;
    line-height: 1.6;
    opacity: .55;
}

/* ========================================================
   PROJECT DOCUMENTATION NAVIGATION
   Used by:
   - 27337-2
   ======================================================== */

.ds-category-nav {
    margin-bottom: 22px;
}

.ds-category-nav-list {
    display: flex;
    flex-direction: column;
    gap: 7px !important;
    width: 100%;
    margin: 0 !important;
    padding: 0;
}


/* NAVIGATION BUTTON */

.ds-category-nav-link {
    width: 100%;
    margin: 0 !important;
}

.ds-category-nav-link .wp-block-button__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid rgba(var(--ds-accent), .11);
    border-radius: 7px;
    background: rgba(var(--ds-accent), .045) !important;
    color: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    box-shadow: none;
    overflow-wrap: anywhere;
    transition:
        background var(--ds-speed) ease,
        border-color var(--ds-speed) ease;
}

.ds-category-nav-link .wp-block-button__link:hover {
    background: rgba(var(--ds-accent), .105) !important;
    border-color: rgba(var(--ds-accent), .25);
}

/* Navigation arrow */

.ds-category-nav-link .wp-block-button__link span {
    display: flex;
    flex: 0 0 22px;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(var(--ds-accent), .08);
    font-size: 13px;
    opacity: .5;
    transition:
        transform var(--ds-speed) ease,
        background var(--ds-speed) ease,
        opacity var(--ds-speed) ease;
}

.ds-category-nav-link .wp-block-button__link:hover span {
    background: rgba(var(--ds-accent), .18);
    transform: translateX(2px);
    opacity: 1;
}

/* ========================================================
   TABLET
   782px – 900px
   ======================================================== */

@media screen and (min-width: 782px) and (max-width: 900px) {

    .ds-docs-page {
        padding-top: 50px;
    }

    .ds-docs-header {
        max-width: 700px;
        margin-bottom: 55px;
    }

    .ds-docs-title {
        font-size: clamp(42px, 7vw, 60px) !important;
    }
}

/* ========================================================
   MOBILE
   781px and below
   ======================================================== */

@media screen and (max-width: 781px) {

    /* Documentation landing page */

    .ds-docs-page {
        padding: 45px 0 65px;
    }

    .ds-docs-header {
        max-width: 100%;
        margin-bottom: 50px;
    }

    .ds-docs-title {
        font-size: clamp(36px, 11vw, 43px) !important;
        line-height: 1 !important;
        letter-spacing: -1.8px;
    }

    .ds-docs-intro {
        font-size: 16px;
        line-height: 1.65;
    }

    .ds-doc-card {
        min-height: 0;
    }

    .ds-doc-card h3 {
        font-size: 22px;
        line-height: 1.25;
    }

    .ds-doc-card > p {
        margin-bottom: 20px !important;
    }

    .ds-docs-footer {
        margin-top: 55px;
        padding-top: 24px;
    }

    .ds-docs-footer p:first-child {
        font-size: 15px;
    }

    .ds-docs-footer p:last-child {
        font-size: 13px;
    }


    /* Project documentation */

    .ds-doc-category {
        margin-bottom: 14px;
    }

    .ds-category-header {
        margin-bottom: 18px;
    }

    .ds-category-header h2 {
        font-size: 21px;
    }

    .ds-category-header p {
        font-size: 13px;
    }

    .ds-category-nav {
        margin-bottom: 35px;
    }

    .ds-category-nav-link .wp-block-button__link {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 12px;
    }
}

/* ========================================================
   SMALL MOBILE
   480px and below
   ======================================================== */

@media screen and (max-width: 480px) {

    .ds-docs-page {
        padding-top: 35px;
        padding-bottom: 50px;
    }

    .ds-docs-header {
        margin-bottom: 40px;
    }

    .ds-docs-title {
        font-size: clamp(34px, 10.5vw, 40px) !important;
        letter-spacing: -1.5px;
    }

    .ds-docs-intro {
        font-size: 15px;
    }

    .ds-doc-card h3 {
        font-size: 20px;
    }

    .ds-doc-card > p {
        font-size: 13px;
    }

    .ds-category-header h2 {
        font-size: 20px;
    }

    .ds-category-nav-link .wp-block-button__link {
        min-height: 42px;
        padding: 9px 10px;
    }

    .ds-docs-footer {
        margin-top: 45px;
    }
}

/* ========================================================
   Product Page
   ======================================================== */

.ds-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 40px;
    margin-top: 8px;
}

.ds-feature-grid ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ds-feature-grid li {
    position: relative;
    padding: 9px 0 9px 22px;
    font-size: 15px;
    line-height: 1.45;
    border-bottom: 1px solid rgba(var(--ds-accent), 0.08);
}

.ds-feature-grid li:last-child {
    border-bottom: none;
}

.ds-feature-grid li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(var(--ds-accent), 0.7);
}

/* Technical Details - Stat Cards */
.ds-tech-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 12px;
}

.ds-tech-stat {
    background: linear-gradient(145deg, rgba(var(--ds-accent), 0.09), rgba(var(--ds-accent), 0.03));
    border: 1px solid rgba(var(--ds-accent), 0.14);
    border-radius: var(--ds-radius);
    padding: 22px 18px;
    text-align: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ds-tech-stat:hover {
    border-color: rgba(var(--ds-accent), 0.28);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.ds-tech-stat .value {
    display: block;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 6px;
    line-height: 1.1;
}

.ds-tech-stat .label {
    display: block;
    font-size: 13px;
    opacity: 0.6;
    font-weight: 500;
}

.ds-tech-notes {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(var(--ds-accent), 0.12);
    font-size: 14px;
    opacity: 0.75;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 900px) {
    .ds-feature-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .ds-tech-stats {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .ds-tech-stats {
        grid-template-columns: 1fr;
    }
}






/* ===== Get Started - Single Column ===== */

.ds-get-started-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}

.ds-get-started-list .wp-block-button {
    margin: 0 !important;
    width: 100%;
}

.ds-get-started-list .wp-block-button__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    padding: 14px 18px;
    border: 1px solid rgba(var(--ds-accent), 0.14);
    border-radius: var(--ds-radius);
    background: rgba(var(--ds-accent), 0.06) !important;
    color: inherit !important;
    font-size: 14.5px;
    font-weight: 600;
    text-align: left;
    box-shadow: none;
    transition: background var(--ds-speed) ease, border-color var(--ds-speed) ease;
}

.ds-get-started-list .wp-block-button__link:hover {
    background: rgba(var(--ds-accent), 0.12) !important;
    border-color: rgba(var(--ds-accent), 0.28);
}

/* ===== Primary (Buy on FAB) ===== */
.ds-get-started-list .ds-cta-primary .wp-block-button__link {
    min-height: 64px;
    padding: 18px 20px;
    font-size: 16px;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(var(--ds-accent), 0.25), rgba(var(--ds-accent), 0.12)) !important;
    border: 1px solid rgba(var(--ds-accent), 0.4);
    box-shadow: 0 4px 16px rgba(var(--ds-accent), 0.12);
}

.ds-get-started-list .ds-cta-primary .wp-block-button__link:hover {
    background: linear-gradient(135deg, rgba(var(--ds-accent), 0.35), rgba(var(--ds-accent), 0.18)) !important;
    border-color: rgba(var(--ds-accent), 0.55);
    box-shadow: 0 6px 22px rgba(var(--ds-accent), 0.2);
}

/* ========================================================
   Patch Notes - Accordian Lists aand Styling
   ======================================================== */

/* Match CoBlocks Accordion to ds-doc-card style (with gradient) */
.wp-block-coblocks-accordion {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.wp-block-coblocks-accordion-item {
  margin: 0 0 14px !important;
  border: 1px solid rgba(90, 120, 255, 0.16) !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, rgba(90, 120, 255, 0.075), rgba(90, 120, 255, 0.024)) !important;
  box-shadow:
    0 8px 26px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Outer card highlight: Shared values for both closed hover AND expanded states */
.wp-block-coblocks-accordion-item:hover,
.wp-block-coblocks-accordion-item:has(details[open]),
.wp-block-coblocks-accordion-item.is-open {
  border-color: rgba(90, 120, 255, 0.28) !important;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Header / summary bar default style */
.wp-block-coblocks-accordion-item__title,
.wp-block-coblocks-accordion-item details summary.wp-block-coblocks-accordion-item__title {
  background: transparent !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  color: #dbdbdb !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  transition: color 0.15s ease, background-color 0.15s ease;
}

/* Open state header default (unhovered) */
.wp-block-coblocks-accordion-item details[open] > summary.wp-block-coblocks-accordion-item__title {
  border-radius: 12px 12px 0 0 !important;
  background: transparent !important;
  color: #ececec !important;
  border-bottom: 1px solid rgba(90, 120, 255, 0.16) !important;
}

/* UNIFIED HOVER STATE: Shared heading hover background & text color for both open and closed states */
.wp-block-coblocks-accordion-item details summary.wp-block-coblocks-accordion-item__title:hover,
.wp-block-coblocks-accordion-item details[open] > summary.wp-block-coblocks-accordion-item__title:hover {
  background: rgba(90, 120, 255, 0.04) !important;
  color: #ececec !important;
}

/* Content area */
.wp-block-coblocks-accordion-item__content {
  border: none !important;
  border-radius: 0 0 12px 12px !important;
  padding: 18px 22px 22px !important;
  background: transparent !important;
  color: #cbd5e1 !important;
}

/* List spacing inside content */
.wp-block-coblocks-accordion-item__content ul {
  margin-top: 0.4em;
  margin-bottom: 1em;
}

.wp-block-coblocks-accordion-item__content li {
  margin-bottom: 0.35em;
}

/* Focus state cleanup */
.wp-block-coblocks-accordion-item__title:focus,
.wp-block-coblocks-accordion-item details summary.wp-block-coblocks-accordion-item__title:focus,
.wp-block-coblocks-accordion-item__title:focus-visible,
.wp-block-coblocks-accordion-item details summary.wp-block-coblocks-accordion-item__title:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}






/* Apply ds-feature-grid list style to accordion content lists */

.wp-block-coblocks-accordion-item__content ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.wp-block-coblocks-accordion-item__content li {
  position: relative;
  padding: 9px 0 9px 22px !important;
  font-size: 15px;
  line-height: 1.45;
  border-bottom: 1px solid rgba(90, 120, 255, 0.08);
  list-style: none !important;
}

.wp-block-coblocks-accordion-item__content li:last-child {
  border-bottom: none;
}

.wp-block-coblocks-accordion-item__content li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(90, 120, 255, 0.7);
}

/* Remove default WP list markers if any remain */
.wp-block-coblocks-accordion-item__content li::marker {
  content: none;
  display: none;
}

/* Tighten spacing around headings inside accordion content */

.wp-block-coblocks-accordion-item__content h4,
.wp-block-coblocks-accordion-item__content .wp-block-heading {
  margin-top: 1em !important;   /* more space above headings */
  margin-bottom: 0.7em !important; /* less space below headings */
}

/* First heading in each accordion: no extra top margin */
.wp-block-coblocks-accordion-item__content > h4:first-child,
.wp-block-coblocks-accordion-item__content > .wp-block-heading:first-child {
  margin-top: 0 !important;
}