/* --- General CKEditor Content Styling (Applies to both sections) --- */
/* This is a base for any content generated by CKEditor */
.ckeditor-content-wrapper,
.product-specs-ckeditor {
    /* Basic text properties */
    /* font-family: 'Arial', sans-serif;  */
    color: #333; /* Darker text for readability */
    line-height: 1.7;
    margin-bottom: 20px; /* Space after the content block */
}

/* Paragraphs */
.ckeditor-content-wrapper p,
.product-specs-ckeditor p {
    margin-bottom: 1em; /* Standard spacing between paragraphs */
}

/* Headings (h1-h6) */
.ckeditor-content-wrapper h1, .product-specs-ckeditor h1,
.ckeditor-content-wrapper h2, .product-specs-ckeditor h2,
.ckeditor-content-wrapper h3, .product-specs-ckeditor h3,
.ckeditor-content-wrapper h4, .product-specs-ckeditor h4,
.ckeditor-content-wrapper h5, .product-specs-ckeditor h5,
.ckeditor-content-wrapper h6, .product-specs-ckeditor h6 {
    margin-top: 1.5em; /* Space above headings */
    margin-bottom: 0em; /* Space below headings */
    /* font-weight: bold; */
    font-weight: 800;
    color: #222; /* Slightly darker for headings */
    line-height: 1.2;
    color: #214842;
}

.ckeditor-content-wrapper h1, .product-specs-ckeditor h1 { font-size: 2.5em; }
.ckeditor-content-wrapper h2, .product-specs-ckeditor h2 { font-size: 2em; }
.ckeditor-content-wrapper h3, .product-specs-ckeditor h3 { font-size: 1.75em; }
.ckeditor-content-wrapper h4, .product-specs-ckeditor h4 { font-size: 1.5em; }
.ckeditor-content-wrapper h5, .product-specs-ckeditor h5 { font-size: 1.25em; }
.ckeditor-content-wrapper h6, .product-specs-ckeditor h6 { font-size: 1em; }


/* Lists (Bulleted, Numbered, Todo) */
.ckeditor-content-wrapper ul, .product-specs-ckeditor ul,
.ckeditor-content-wrapper ol, .product-specs-ckeditor ol {
    margin: 0 0 1em 25px; /* Top, Right, Bottom, Left */
    padding: 0;
}

.ckeditor-content-wrapper li,
.product-specs-ckeditor li {
    margin-bottom: 0.5em;
    list-style-position: outside; /* Ensures marker is outside the content box */
    list-style-type: disc;
    color: #214842;
}

/* Todo Lists (CKEditor generates checkboxes for these) */
.ckeditor-content-wrapper ul.todo-list,
.product-specs-ckeditor ul.todo-list {
    list-style: none; /* Remove default bullet */
}
.ckeditor-content-wrapper ul.todo-list li,
.product-specs-ckeditor ul.todo-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
}
.ckeditor-content-wrapper ul.todo-list li input[type="checkbox"],
.product-specs-ckeditor ul.todo-list li input[type="checkbox"] {
    margin-right: 8px;
    margin-top: 4px; /* Adjust vertical alignment of checkbox */
}

/* Bold and Italic */
.ckeditor-content-wrapper strong, .product-specs-ckeditor strong,
.ckeditor-content-wrapper b, .product-specs-ckeditor b {
    font-weight: bold;
    color: #214842;
}

.ckeditor-content-wrapper em, .product-specs-ckeditor em,
.ckeditor-content-wrapper i, .product-specs-ckeditor i {
    font-style: italic;
}

/* Strikethrough */
.ckeditor-content-wrapper s, .product-specs-ckeditor s {
    text-decoration: line-through;
}

/* Underline */
.ckeditor-content-wrapper u, .product-specs-ckeditor u {
    text-decoration: underline;
}

/* Subscript and Superscript */
.ckeditor-content-wrapper sub, .product-specs-ckeditor sub {
    vertical-align: sub;
    font-size: smaller;
}

.ckeditor-content-wrapper sup, .product-specs-ckeditor sup {
    vertical-align: super;
    font-size: smaller;
}

/* Links */
.ckeditor-content-wrapper a,
.product-specs-ckeditor a {
    color: #007bff; /* Standard blue link color */
    text-decoration: none;
    transition: color 0.3s ease;
}

.ckeditor-content-wrapper a:hover,
.product-specs-ckeditor a:hover {
    text-decoration: underline;
    color: #0056b3; /* Darker blue on hover */
}

/* Blockquote */
.ckeditor-content-wrapper blockquote,
.product-specs-ckeditor blockquote {
    border-left: 4px solid #ccc;
    padding-left: 15px;
    margin: 1.5em 0; /* Vertical space for blockquotes */
    font-style: italic;
    color: #555;
}

/* Tables */
.ckeditor-content-wrapper table,
.product-specs-ckeditor table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0; /* Vertical space for tables */
    font-size: 0.95em;
}

.ckeditor-content-wrapper th, .product-specs-ckeditor th,
.ckeditor-content-wrapper td, .product-specs-ckeditor td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

.ckeditor-content-wrapper th,
.product-specs-ckeditor th {
    background-color: #f2f2f2;
    font-weight: bold;
    color: #444;
}

/* Horizontal Line */
.ckeditor-content-wrapper hr,
.product-specs-ckeditor hr {
    border: none;
    border-top: 1px solid #eee;
    margin: 2em 0;
}

/* Alignment (text-align styles are typically applied directly by CKEditor) */
/* However, you can enhance them if needed for specific containers */
.ckeditor-content-wrapper .text-align-left { text-align: left; }
.ckeditor-content-wrapper .text-align-center { text-align: center; }
.ckeditor-content-wrapper .text-align-right { text-align: right; }
.ckeditor-content-wrapper .text-align-justify { text-align: justify; }

/* Highlight */
.ckeditor-content-wrapper mark,
.product-specs-ckeditor mark {
    background-color: yellow; /* Default highlight color */
    padding: 0.2em 0.4em;
    border-radius: 3px;
}

/* Specific styling for Section 1.2 (Right side of image) */
.product-specs-ckeditor {
    /* Adjust margin/padding to fit layout next to image */
    margin-top: 0; /* Remove default margin */
    padding-left: 30px; /* Space from the image */
    box-sizing: border-box; /* Include padding in element's total width/height */
    /* You might want a smaller font size here than the main description */
    font-size: 0.95em;
}
/* If you want different heading sizes in this specific section */
.product-specs-ckeditor h3 { font-size: 1.3em; }
.product-specs-ckeditor h4 { font-size: 1.1em; }


/* Specific styling for Section 2.1 (Full-width detailed specifications) */
.secondary-specs {
    padding: 0px 0; 
    /* More padding for a dedicated section */
    /* background-color: #f8f8f8;  */
    /* Light background to differentiate */
    /* border-top: 1px solid #eee;  */
    /* Subtle separator */
}

.secondary-specs_header {
    text-align: center;
    margin-bottom: 50px;
    font-size: 2.8em;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ckeditor-content-wrapper {
    /* max-width: 960px;  */
    max-width: 1300px; 
    /* Constrain width for readability */
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px; /* Inner padding for smaller screens */
    font-size: 1.1em; /* Slightly larger font for main content */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .product-specs-ckeditor {
        padding-left: 0; /* Remove padding when stacked vertically */
        margin-top: 30px; /* Add space between image and text */
    }
    .ckeditor-content-wrapper {
        font-size: 1em; /* Adjust font size for smaller screens */
    }
    .secondary-specs {
        padding: 40px 0;
    }
    .secondary-specs_header {
        font-size: 2em;
        margin-bottom: 30px;
    }
}