body {
    font-family: "Roboto", sans-serif;
    margin: 0;
    position: relative; /* To allow absolute positioning of the overlay */
    background-color: #F5F5F5; /* Baggrund 1 */
    color: #21343A; /* Tekst */
}

.quoteslabel {
    display: block;
}

.quoteslabel,
#queryInput {
    margin: 0.4rem 0;
}

.selectedquotediv {
    display: flex;
}

.quote_attribute {
    width: 8ch;
}


/* Optional: Add a pointer cursor to indicate it's clickable */
#toggleInspirationHeader {
    cursor: pointer;
}


.hidden {
    display: none;
}

#quotesList {
    margin: 0 0 0 0px;
    line-height: 1.5
}

.b1 {
    list-style-image: url(http://upload.wikimedia.org/wikipedia/commons/1/19/Icons-mini-icon_attachment.gif);
    cursor: pointer;
}

.poster_margin_input {
    width: 8ch; /* Adjust the width as needed */
}

/* You can either include this in your layout.css file or keep it here */
.page_content {
    display: flex;
}
#left-column {
    width: 100%;
    /* Adjust the padding and margin as needed */
}

#mockupContainer {
    /* padding-top: 141.42857%; */ /* (594 / 420) * 100 */
    width: 90%;
    position: relative;
    margin: 0 auto; /* Center the container */
    max-width: 768px;
}
#renderedQuotePosterImg {
    position: absolute;
    /* These positions work for Gemini_Generated_Image_clf5aqclf5aqclf5.jpeg and depend on #mockupContainer styling*/
    width: 39%;
    left: 30.5%;
    top: 18%;
}

#backgroundMockupImg {
    /* position: absolute; */
    width: 100%;
    left: 0;
    top: 0;
    /* slightly rounded corners */
    border-radius: 0.75rem; /* Equivalent to rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Equivalent to shadow-lg */
}

/* The navigation bar */
.navbar {
    overflow: hidden;
    background-color: #BDCBCF; /* Baggrund 3 */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
}

/* Style for the SVG inside the navbar */
.navbar svg {
    float: left; /* Keep it on the left */
    padding: 5px 10px; /* Add some padding around the SVG */
    vertical-align: middle; /* Align the SVG vertically */
}
/* Links inside the navbar */
.navbar p {
    float: left;
    display: block;
    color: #F5F5F5; /* Baggrund 1 */
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Links inside the navbar */
.navbar a {
    float: left;
    display: block;
    color: #F5F5F5; /* Baggrund 1 */
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    margin-top: 16px;
    margin-bottom: 16px;
}

/* Change background on mouse-over */
.navbar a:hover {
    background: #DCE1E1; /* Baggrund 2 */
    color: #21343A; /* Tekst */
}

/* Main content */
.main {
    margin-top: 30px; /* Add a top margin to avoid content overlay */
}


textarea {
    resize: none;
}

.resizable-textarea {
    min-height: 6rem; /* Default height showing a few rows (adjust as needed) */
    overflow: hidden; /* Hide overflow by default */
    transition: min-height 0.3s ease-in-out; /* Smooth transition for blur */
    resize: none; /* Prevent manual resizing by the user */
    width: 50%; /* Take full width of the container */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    margin-left: auto;
    margin-right: auto;
}

#selectedQuotesList {
    padding: 0;
    list-style-type: none;

}

.download-btn {
    display: inline-block;
    padding: 10px 20px;
    color: #F5F5F5; /* Baggrund 1 */
    background-color: #EFA914; /* Accent 1 */
    border-radius: 5px;
    text-decoration: none;
    margin-top: 20px;
    cursor: pointer;
    /* Smooth transition for background color and cursor changes */
    transition: background-color 0.3s ease, cursor 0.3s ease;
}

.download-btn:hover {
    background-color: #D6970C; /* A darker shade of Accent 1 for hover */
}

/* Style for disabled state */
.download-btn:disabled {
    background-color: #B0B0B0; /* A greyish color to indicate disabled state */
    cursor: not-allowed; /* Change cursor to "not-allowed" */
    opacity: 0.7; /* Slightly reduce opacity to further indicate disability */
    /* Ensure hover effects are not applied when disabled */
    pointer-events: none; /* Disables click events on the element */
}

/* Ensure that the :hover state does not apply to disabled buttons */
.download-btn:disabled:hover {
    background-color: #B0B0B0; /* Keep the disabled background color on hover */
}

/* Scrolling ticker bar */
/* https://stackoverflow.com/questions/67952382/continuous-scrolling-ticker-marquee-with-multiple-messages-js-plugin-needed */

.ticker-bar-bg {
    background-color: #DCE1E1; /* Baggrund 2 */
}

/* Style the container (the UL element) */
.scrolling-ticker-bar {
    width: 100%; /* Take full width */
    overflow: hidden; /* Hide items that scroll out of view */
    padding: 10px 0; /* Vertical padding for the "slim bar" feel */
    /*box-sizing: border-box;  Include padding in the element's total width and height */
    display: flex; /* Arrange list items horizontally */
    list-style: none; /* Remove default bullet points */
    margin: 0; /* Remove default margin */
}

/* Style the list items (LI elements) */
.scrolling-ticker-bar li {
    flex-shrink: 0; /* Prevent items from shrinking */
    padding: 0 15px; /* Spacing between items */
    margin: 0; /* Remove default margin */
    white-space: nowrap; /* Prevent text wrapping within an item */
    cursor: pointer; /* Indicate items are clickable */
    font-size: 1em; /* Adjust font size as needed */
    /* Add any other styling for your list items (color, font-weight, etc.) */
    color: #21343A; /* Tekst */
}
.b2 {
    cursor: pointer;
}
/* Ensure the .b1 class (if needed) doesn't interfere */
/* .scrolling-ticker-bar li.b1 { */
/* Add specific styles for b1 if necessary, or remove */
/* For example: border: 1px solid #ccc; */
/* } */

/* Ensure IDs don't interfere, though they shouldn't */
/* .scrolling-ticker-bar li[id^="current_query-"] { */
/* Styles specific to these IDs if needed */
/* } */

/* feedback */



.overlay {
    display: none; /* Initially hidden */
    position: fixed; /* Stay in place even when scrolling */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure it's on top of other content */
}

.feedback-form {
    background-color: #F5F5F5; /* Baggrund 1 */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    width: 80%;
    position: relative; /* To position the close button */
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #21343A; /* Tekst */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

/* input[type="text"], */
.feedbacktextarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #BDCBCF; /* Baggrund 3 */
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
    min-height: 100px;
}
.likert-scale {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.likert-scale input[type="radio"] {
    margin: 0;
}

.likert-scale label {
    font-weight: normal;
    margin-bottom: 0;
}

#submitBtn {
    background-color: #EFA914; /* Accent 1 */
    color: #F5F5F5; /* Baggrund 1 */
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease; /* Optional: for a smooth transition */
}

#submitBtn:hover {
    background-color: #D6970C; /* A darker shade of Accent 1 for hover */
}

/* Styles for the disabled state */
#submitBtn:disabled {
    background-color: #ccc; /* Greyed out background */
    color: #666; /* Greyed out text */
    cursor: not-allowed; /* Change cursor to indicate it's not clickable */
    border: 1px solid #aaa; /* Optional: slightly darker border */
}

#submitBtn:disabled:hover {
    background-color: #ccc; /* Keep the grey background on hover when disabled */
}



/* Optional: Add some spacing between the items for better visual appeal */
.advanced-option-item {
    margin-bottom: 15px; /* Adds space between each option item */
    display: none; /* Hide at first, consider using block or flex in js */
    align-items: center; /* Vertically centers items within their container */
    gap: 10px; /* Adds space between labels and inputs/selects */
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}

/* Styling for the select element itself, similar to #queryInput */
.custom-select {
    width: 100%; /* Make it take full width of its wrapper */
    padding: 0.75rem 1rem; /* Adjust padding to match the search input */
    border: 1px solid #DCE1E1; /* Baggrund 2 */
    border-radius: 0.5rem; /* rounded-lg */
    font-size: 1rem; /* Base font size */
    color: #21343A; /* Tekst */
    background-color: #F5F5F5; /* Baggrund 1 */
    appearance: none; /* Remove default browser styling for the select arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    line-height: 1.5; /* Adjust line-height for better vertical alignment */
    /* Add a custom arrow if you want to replace the default one */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.5em; /* Size of the custom arrow */
}

/* Focus style for the select element */
.custom-select:focus {
    outline: none;
    border-color: #597C87; /* Baggrund 4 */
    box-shadow: 0 0 0 3px rgba(89, 124, 135, 0.25); /* Baggrund 4 with transparency */
}



/* allign option styling */

.align-options {
    display: inline-flex;                    /* Activates Flexbox */
    flex-direction: row;        /* Explicitly sets items to arrange in a row (default for flex, but good for clarity/overrides) */
    gap: 10px;                            /* Space between the items */
    align-items: center;        /* Vertically centers items if they have different heights */
    justify-content: flex-start; /* Aligns items to the start of the container */
}

.align-options input[type="radio"] {
    /* Hide the default radio button */
    display: none;
}

.align-options .align-icon {
    cursor: pointer;
    padding: 5px;
    border: 2px solid transparent; /* Default border, transparent */
    border-radius: 4px;
    transition: all 0.2s ease-in-out; /* Smooth transition for hover and selection */
    display: inline-flex; /* Ensures the SVG is centered if needed */
    align-items: center;
}

.align-options .align-icon:hover {
    border-color: #a0a0a0; /* Subtle border on hover */
}

.align-options input[type="radio"]:checked + .align-icon {
    border-color: #EFA914; /* Accent 1 */
    background-color: #FFF2D6; /* A lighter shade of Accent 1 */
}

/* Optional: Adjust SVG size within the label if necessary */
.align-options .align-icon svg {
    display: block; /* Remove any extra space below the SVG */
}

/* ai generated style for quotes */
/* https://gemini.google.com/app/8abe77c8480de1ff */

/* Container for the whole page content */
.page-container { /* Replaces Tailwind's "container mx-auto" */
    max-width: 1280px; /* A common max-width, adjust as needed */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Header Styles */
.page-header { /* Replaces Tailwind's "mb-6 text-center" */
    margin-bottom: 1.5rem; /* Equivalent to mb-6 */
    text-align: center; /* Equivalent to text-center */
}

.page-header h1 { /* Replaces Tailwind's "text-3xl font-bold text-sky-700" */
    font-size: 1.875rem; /* Equivalent to text-3xl */
    line-height: 2.25rem;
    font-weight: 700; /* Equivalent to font-bold */
    color: #597C87; /* Baggrund 4 */
}

.page-header p { /* Replaces Tailwind's "text-slate-600" */
    color: #21343A; /* Tekst */
}

/* Scroll Container (#scrollContainer) */
#scrollContainer {
    display: flex;
    overflow-x: auto;
    padding: 1rem; /* Equivalent to p-4 */
    background-image: linear-gradient(to right, #DCE1E1, #BDCBCF); /* Baggrund 2 to Baggrund 3 */
    border-radius: 0.75rem; /* Equivalent to rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Equivalent to shadow-lg */
    /* custom-scrollbar class will apply scrollbar styles */
}

/* Quote List (ul#quoteList) */
#quoteList {
    display: flex;
    flex-wrap: nowrap;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* Spacing between quote items (li) - equivalent to space-x-4 on the ul flex container */
#quoteList > .quote-item + .quote-item {
    margin-left: 1rem;
}

.pointer {
    cursor: pointer;
}

/* Quote Item (dynamically added, class .quote-item) */
.quote-item {
    /* Base styles from original custom CSS */
    height: auto;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    /* Translated from Tailwind classes previously applied in JS */
    flex-shrink: 0;
    width: 13rem; /* 52 * 0.25rem */
    background-color: #F5F5F5; /* Baggrund 1 */
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    font-size: 0.75rem; /* text-sm */
    /* line-height: 1.25rem; */
    white-space: pre-wrap;
    font-weight: 500; /* font-medium */
    color: #21343A; /* Tekst */
    border: 1px solid #DCE1E1; /* Baggrund 2 */
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.quote-item:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* hover:shadow-xl */
}

/* Loading and No More Quotes Indicators */
#loadingIndicator,
#noMoreQuotesIndicator,
#noQuotesIndicator {
    text-align: center;
    padding: 1rem;
    color: #21343A; /* Tekst */
    margin-top: 1rem;
    /* display: none; is handled by inline style via JS */
}

/* Custom scrollbar for better aesthetics (optional) */
.custom-scrollbar::-webkit-scrollbar {
    height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #BDCBCF; /* Baggrund 3 */
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #597C87; /* Baggrund 4 */
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #3A2139; /* Accent 2 */
}


/* For Firefox */
.custom-scrollbar {
    scrollbar-width: thin; /* 'auto' or 'thin' */
    scrollbar-color: #597C87 #BDCBCF; /* thumb color track color (Baggrund 4 and Baggrund 3) */
}


/* Footer */

/* Base styles for the footer */
footer {
    width: 100%;
    /* Using a subtle gradient for the footer background */
    background-color: #DCE1E1; 
    padding: 20px 0; /* Add some vertical padding to the footer */
    text-align: center;
}

/* Styles for the container of the buttons */
.footer-buttons {
    display: flex; /* Enables flexbox layout */
    justify-content: center; /* Centers items horizontally */
    align-items: center; /* Centers items vertically */
    flex-wrap: wrap; /* Allows buttons to wrap to the next line on smaller screens */
    gap: 15px; /* Adds space between buttons in both rows and columns */
    padding: 0 10px; /* Add some horizontal padding to prevent buttons from touching edges */
}

/* Styles for individual download buttons */
.download-btn {
    padding: 12px 25px; /* Slightly increased padding for better touch targets */
    text-decoration: none; /* Removes underline from links */
    color: #21343A; /* Tekst */
    background-color: #F5F5F5; /* Baggrund 1 */
    border: 1px solid #DCE1E1; /* Baggrund 2 */
    border-radius: 8px; /* Slightly more rounded corners */
    white-space: nowrap; /* Prevents button text from wrapping initially */
    font-size: 16px; /* Ensure readable font size */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Hover effect for buttons */
.download-btn:hover {
    background-color: #BDCBCF; /* Baggrund 3 on hover */
    color: #21343A; /* Tekst on hover */
    border-color: #597C87; /* Baggrund 4 on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
    transform: translateY(-2px); /* Slight lift effect */
}

/* --- Media Queries for Responsiveness --- */

/* For screens smaller than 768px (common tablet portrait and mobile landscape) */
@media (max-width: 768px) {
    .footer-buttons {
        flex-direction: column; /* Stack buttons vertically */
        gap: 10px; /* Adjust gap for vertical stacking */
    }

    .download-btn {
        width: 90%; /* Make buttons take up more width */
        max-width: 300px; /* Limit maximum width for larger screens within this breakpoint */
        white-space: normal; /* Allow text to wrap if necessary */
        text-align: center; /* Center text within the button */
    }
}

/* For screens smaller than 480px (common mobile portrait) */
@media (max-width: 480px) {
    footer {
        padding: 15px 0; /* Reduce footer padding */
    }

    .download-btn {
        padding: 10px 15px; /* Further reduce button padding */
        font-size: 15px; /* Slightly smaller font size */
    }
}


/* search bar? */

/* Container for layout control */
.container {
    margin-left: auto;
    margin-right: auto;
    background-color: #DCE1E1; /* Baggrund 2 to Baggrund 3 */
    max-height: 5%; /* Limit height to 5% of the viewport */
    height: 5vh;
}

.container img {
    height: 2.5vh; /* Set image height to 4% of the viewport height */
}
.container p {
    margin-left: 1rem; /* Add some space between the image and text */
}


/* This CSS will apply when the viewport width is smaller than 768px */
/* @media (max-width: 640px) {
    .container p {
        display: none;
    }
} */

.header-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.language-select:focus {
    outline: none;
    border-color: #597C87; /* Baggrund 4 */
    box-shadow: 0 0 0 2px rgba(89, 124, 135, 0.5);
}


/* Search Bar Wrapper */
.search-bar-wrapper {
    position: relative;
    width: 100%;
    max-width: 36rem; /* max-w-xl (576px) */
    flex-grow: 1; /* Allow search bar to take available space */
    padding-left: 1rem;
}

@media (pointer: coarse) and (hover: none) {
    /* Styles that specifically target what are very likely mobile browsers */
    /* remove magnifying glass icon */
    .search-icon-button {
        display: none; /* Hide the search icon button on mobile */
    }
}


/* Main Content Area Styling (for context) */
.main-content {
    padding-top: 2rem; /* py-8 (32px) */
    padding-bottom: 2rem; /* py-8 (32px) */
}


/* Search Icon Button */
.search-icon-button {
    position: absolute;
    right: 0.75rem; /* Adjusted for button padding */
    top: 50%;
    transform: translateY(-50%);
    color: #BDCBCF; /* Baggrund 3 */
    background: none;
    border: none;
    padding: 0.25rem; /* Small padding for click area */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.search-icon-button:focus {
    outline: none;
    color: #597C87; /* Baggrund 4 */
}
.search-icon-button svg {
    width: 20px;
    height: 20px;
}



.subheader {
    font-weight: 500;
    font-size: 0.9em;
    color: #21343A; /* Tekst */
    letter-spacing: 1.25px;
    text-transform: uppercase;
    display: inline-block; /* Critical for width and centering via parent */
    position: relative;
    padding-bottom: 0.6em; /* Space between text and underline */
    margin-top: 1.1em;
    margin-bottom: 1.1em;
    text-align: center;
    /* Centering is done by text-align: center; on the parent div */
}

.subheader::after {
    content: '';
    position: absolute;
    bottom: 0;
    height: 2px;
    background-color: #EFA914; /* Accent 1 */
    width: 120%; /* Make the underline span the full width of the label */
    transform: translateX(0); /* Reset any transforms if present */
    left: -10%; /* Original value, keep if you want the extension */
}

.subheader-container {
    text-align: center; /* Centers the subheader text */
}



/* Style for the accordion icon */
.accordion-icon {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #21343A; /* Down arrow color, match subheader text color */
    transition: transform 0.3s ease-in-out; /* Smooth transition for rotation */
    margin-left: 0.5em; /* Space between text and arrow */
}

/* Rotate the arrow when the content is open (you'll need to add a class to the header via JS) */
.subheader.open .accordion-icon {
    transform: rotate(180deg); /* Up arrow */
}

/* Add a subtle hover effect to the subheader to indicate interactivity */
#toggleInspirationHeader:hover {
    color: #EFA914; /* Accent 1 on hover */
    cursor: pointer; /* Already present, good to keep */
}

/* Adjust the underline behavior if needed on hover to complement the icon */
#toggleInspirationHeader:hover::after {
    background-color: #EFA914; /* Accent 1 */
}


.image-container {
    display: flex; /* Enables flexbox for the container */
    justify-content: center; /* Centers the images horizontally within the container */
    align-items: flex-start; /* Aligns items to the start of the cross axis (top) */
    gap: 1rem; /* Adds space between the images */
    margin-top: 1rem; /* Adds space above the images */
    flex-wrap: wrap; /* Allows images to wrap to the next line on smaller screens */
}

.layout-preview {
    /* Set a fixed width or a max-width based on your design */
    max-width: 33%; /* Example: set a fixed width for both images */
    max-height: 150px;
    height: auto; /* Maintain aspect ratio */
    flex-shrink: 0; /* Prevents images from shrinking if container is too small */
    /* You can also use max-width and let flexbox handle distribution */
    /* max-width: 45%; /* Example: each image takes up to 45% of the container width */
}

.layout-preview.selected {
    border-color: #EFA914; /* Accent 1 */
    box-shadow: 0 0 15px rgba(239, 169, 20, 0.6); /* Optional: Add a subtle glow (Accent 1 with transparency) */
}

/* font dropdown */

/* Reusing your select-wrapper for the custom dropdown */
.custom-dropdown-wrapper {
    position: relative;
    width: 120%; /* Or fixed width if preferred */
    max-width: 50rem;
    min-width: 12rem;
    flex-grow: 1;
}

/* Styling for the button that acts as the dropdown trigger */
.custom-select-trigger {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #DCE1E1; /* Baggrund 2 */
    border-radius: 0.5rem;
    font-size: 1rem;
    color: #21343A; /* Tekst */
    background-color: #F5F5F5; /* Baggrund 1 */
    cursor: pointer;
    text-align: left; /* Align text like an input */
    line-height: 1.5;
    display: flex; /* To align text and custom arrow */
    justify-content: space-between;
    align-items: center;
    /* Custom arrow - you can use your existing SVG data URI or a simple CSS arrow */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.5em;
}

/* Styling for the dropdown list itself */
.custom-options-list {
    display: none; /* Hidden by default */
    position: absolute;
    top: calc(100% + 0.5rem); /* Position below the trigger with a small gap */
    left: 0;
    right: 0;
    background-color: #F5F5F5; /* Baggrund 1 */
    border: 1px solid #DCE1E1; /* Baggrund 2 */
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    z-index: 10;
    max-height: 200px; /* Or adjust as needed */
    overflow-y: auto;
    list-style: none; /* Remove default list styling if using ul/li */
    padding: 0;
    margin: 0;
}

.custom-options-list.visible {
    display: block;
}

/* Styling for individual option items */
.option-item {
    padding: 0.75rem 1rem; /* Match padding of trigger */
    cursor: pointer;
    color: #21343A; /* Tekst */
}

.option-item:hover,
.option-item.selected { /* Add a class for the currently selected item */
    background-color: #DCE1E1; /* Baggrund 2 */
}

/* styling for color picker */

/* Styles for the color picker container */
#colorPickerContainer {
    display: flex; /* Equivalent to Tailwind flex */
    flex-wrap: wrap; /* Equivalent to Tailwind flex-wrap */
    gap: 0.5rem; /* Equivalent to Tailwind gap-2 */
}

/* Base styles for each color square */
.color-square {
    width: 2rem; /* Equivalent to Tailwind w-8 */
    height: 2rem; /* Equivalent to Tailwind h-8 */
    border-radius: 0.375rem; /* Equivalent to Tailwind rounded-md */
    cursor: pointer; /* Equivalent to Tailwind cursor-pointer */
    border: 1px solid #BDCBCF; /* Baggrund 3 */
    transition: all 0.2s ease-in-out; /* Equivalent to Tailwind transition-all duration-200 */
    box-sizing: border-box; /* Ensures padding/border don't add to total size */
}

/* Hover effect for color squares */
.color-square:hover {
    box-shadow: 0 0 0 2px #DCE1E1, 0 0 0 3px #BDCBCF; /* Baggrund 2 and Baggrund 3 */
}

/* Selected state for color squares */
.color-square.selected {
    box-shadow: 0 0 0 2px #DCE1E1, 0 0 0 4px #597C87; /* Baggrund 2 and Baggrund 4 */
}

#searchResultsCount {
    font-size: 0.875rem; /* Equivalent to Tailwind text-sm */
    color: #21343A; /* Tekst */
    margin-top: 0.5rem; /* Equivalent to Tailwind mt-2 */
    text-align: center; /* Center the text */
}

/* While a search runs the header names it; the last query shows once results are in */
#searchResultsCount .results-pending,
#searchResultsCount[data-state="pending"] .results-done {
    display: none;
}

#searchResultsCount[data-state="pending"] .results-pending {
    display: block;
}

/* ==========================================================================
   MILESTONE M3: MODERN E-COMMERCE STOREFRONT STYLES (Features 14-19)
   ========================================================================== */

:root {
    --brand-primary: #21343A;
    --brand-primary-hover: #162227;
    --brand-accent: #597C87;
    --brand-accent-light: #EAEFF2;
    --brand-highlight: #EFA914;
    --bg-page: #F8FAFC;
    --bg-surface: #FFFFFF;
    --border-subtle: #E2E8F0;
    --border-focus: #597C87;
    --text-main: #0F172A;
    --text-muted: #64748B;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-elevated: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    --transition-fast: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Studio Global Container & Header */
body.studio-body {
    margin: 0;
    background-color: var(--bg-page);
    color: var(--text-main);
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.studio-header {
    background: #FFFFFF;
    border-bottom: 1px solid var(--border-subtle);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.header-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0.85rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.brand-logo {
    height: 38px;
    width: auto;
    margin-left: 1px; /* Lines the logo up with the white of the cards below, inside their pale 1px border */
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cart-trigger-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    background: #FFFFFF;
    color: var(--text-main);
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.cart-trigger-btn:hover {
    background: #F8FAFC;
    border-color: #CBD5E1;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
}

.cart-badge-pill {
    position: absolute;
    /* Out on the corner, so the badge does not cover the cart icon */
    top: -10px;
    right: -10px;
    box-sizing: border-box;
    background: #E11D48;
    color: #FFFFFF;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFFFFF;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cart-badge-pill.bump {
    transform: scale(1.35);
}

/* An empty cart shows no badge */
.cart-badge-pill[hidden] {
    display: none;
}

/* Studio 2-Column Grid Layout */
.studio-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    display: grid;
    /* minmax(0, …): a plain 1fr column grows to its widest unbreakable content
       (the topic pills, the search bar), which made the page wider than phones */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

.controls-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.customizer-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #FFFFFF;
    font-size: 0.85rem;
    font-weight: 700;
}

.card-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main);
}

/* Feature 14: Search Bar & Concept Pills */
.search-section {
    width: 100%;
}

.search-bar-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #FFFFFF;
    padding: 0.4rem 0.6rem;
    border-radius: 9999px;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-bar-container:focus-within {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(89, 124, 135, 0.15);
}

.language-dropdown-wrapper {
    position: relative;
}

.language-select {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-subtle);
    border-radius: 9999px;
    background: #F8FAFC;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    outline: none;
    /* No dropdown arrow: the flag and code already read as a choice */
    appearance: none;
    -webkit-appearance: none;
}

.search-input-group {
    position: relative;
    display: flex;
    align-items: center;
    flex-grow: 1;
    min-width: 0;
}

.search-icon {
    display: flex;
    align-items: center;
    padding-left: 0.5rem;
    color: var(--text-muted);
}

.search-input {
    width: 100%;
    min-width: 0;
    text-overflow: ellipsis;
    border: none;
    outline: none;
    padding: 0.6rem 0.75rem;
    font-size: 0.95rem;
    color: var(--text-main);
    background: transparent;
}

.search-input::placeholder {
    color: #94A3B8;
}

.search-clear-btn {
    background: #E2E8F0;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #64748B;
    cursor: pointer;
    flex: none;
    margin-right: 0.5rem;
    transition: background-color 0.15s ease;
}

/* .hidden is declared earlier with the same specificity, so display: flex above would win */
.search-clear-btn.hidden {
    display: none;
}

.search-clear-btn:hover {
    background: #CBD5E1;
    color: #0F172A;
}

.search-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #E2E8F0;
    border-top-color: var(--brand-accent);
    border-radius: 50%;
    box-sizing: border-box;
    flex: none;
    animation: spin 0.6s linear infinite;
    margin-right: 0.5rem;
}

/* The search, studio and checkout spinners all turn on this */
@keyframes spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .search-spinner,
    .studio-spinner,
    .checkout-spinner {
        animation-duration: 1.6s;
    }
}

.search-submit-btn {
    background: var(--brand-primary);
    color: #FFFFFF;
    border: none;
    padding: 0.6rem 1.25rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.search-submit-btn:hover {
    background: var(--brand-primary-hover);
}

/* Concept Pills */
.concept-pills-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    overflow-x: auto;
    padding-bottom: 0.4rem;
    scrollbar-width: thin;
}

.pills-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pills-scroll-wrapper {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.concept-pill {
    background: #F1F5F9;
    color: #334155;
    border: 1px solid var(--border-subtle);
    border-radius: 9999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition-fast);
}

.concept-pill:hover {
    background: #E2E8F0;
    color: #0F172A;
    border-color: #CBD5E1;
}

.concept-pill.active {
    background: var(--brand-accent);
    color: #FFFFFF;
    border-color: var(--brand-accent);
    box-shadow: 0 2px 4px rgba(89, 124, 135, 0.25);
}

/* Search results: a list of rows like the selection tray, in the page scroll
   (no inner scroll box), with the whole quote, a + and its source. A click adds
   the quote to the poster and the row leaves the list. */
.quote-results-wrapper {
    margin-top: 1rem;
}

.quote-cards-grid {
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: opacity 0.2s ease;
}

/* The old results fade while a search runs, but stay usable */
.quote-cards-grid[aria-busy="true"],
.quote-cards-grid[aria-busy="true"] ~ .show-more-btn {
    opacity: 0.5;
}

.quote-card {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0 0.35rem 0 0;
    background: #FFFFFF;
    border: 1px solid var(--border-subtle);
    margin: -1px 0 0;
    cursor: pointer;
    transition: background 0.15s ease;
}

/* The row's add button: the + and the quote (the ♥ beside it is its own button) */
.quote-card-add {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.65rem 0.4rem 0.65rem 0.85rem;
    background: none;
    border: none;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.quote-card-add:focus-visible {
    outline: none;
}

.quote-card:first-child {
    margin-top: 0;
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
}

.quote-card:last-child {
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

/* Where a picked row was: it shrinks away while the quote flies to the tray */
.quote-card-spacer {
    flex: none;
    height: 0;
}

.quote-card:hover {
    background: #F8FAFC;
}

.quote-card:has(.quote-card-add:focus-visible) {
    z-index: 2;
    outline: 2px solid var(--brand-highlight);
    outline-offset: -2px;
}

.quote-card-check {
    flex: none;
    width: 24px;
    height: 24px;
    margin-top: 0.05rem;
    border-radius: 50%;
    border: 1.5px solid #CBD5E1;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.quote-card:hover .quote-card-check {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
    color: #FFFFFF;
}

.quote-card-main {
    flex: 1;
    min-width: 0;
}

.quote-card-text {
    display: block;
    font-size: 0.9rem;
    line-height: 1.4;
    font-weight: 600;
    color: #1E293B;
    overflow-wrap: anywhere;
}

.quote-card-author {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* The copy of a quote that flies between the results and the tray */
.quote-flyer {
    position: fixed;
    z-index: 1000;
    box-sizing: border-box;
    padding: 0.55rem 0.75rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: #FFFFFF;
    border: 1px solid var(--brand-accent);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.25);
    font-size: 0.86rem;
    font-weight: 600;
    color: #1E293B;
    pointer-events: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* First-visit guide above the results */
.studio-guide {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    background: var(--brand-accent-light);
    border-radius: var(--radius-md);
}

.studio-guide[hidden] {
    display: none;
}

.guide-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.guide-title {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--brand-primary);
}

.guide-close {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
}

.guide-close:hover {
    background: rgba(255, 255, 255, 0.7);
}

.guide-steps {
    margin: 0.35rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: guide;
    font-size: 0.82rem;
    color: var(--text-main);
}

.guide-steps li {
    counter-increment: guide;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.15rem 0;
    transition: color 0.2s ease;
}

.guide-steps li::before {
    content: counter(guide);
    flex: none;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--brand-accent);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2rem;
    text-align: center;
}

.guide-steps li.done {
    color: var(--text-muted);
    text-decoration: line-through;
}

.guide-steps li.done::before {
    content: '✓';
    background: var(--brand-accent);
    color: #FFFFFF;
}

.quote-results-empty {
    margin: 0;
    padding: 1rem;
    color: var(--text-muted);
}

.show-more-btn {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.55rem;
    background: #FFFFFF;
    border: 1px dashed #CBD5E1;
    border-radius: var(--radius-md);
    color: var(--brand-primary);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.show-more-btn:hover {
    border-color: var(--brand-accent);
    background: var(--brand-accent-light);
}

.selected-count-badge {
    background: var(--brand-accent);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
}

/* "Clear all", at the right end of the tray's header */
.multi-select-actions {
    display: flex;
    gap: 0.4rem;
    margin-left: auto;
}

.action-btn-sm {
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    color: #334155;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.action-btn-sm:hover {
    background: #E2E8F0;
    color: #0F172A;
}

/* Selection tray: one compact row per picked quote, the editor opens on tap */
.selected-quote-section {
    margin-top: 1.25rem;
    border-top: 1px solid var(--border-subtle);
    padding-top: 1rem;
}

.tray-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.tray-title {
    margin: 0;
}

.tray-hint {
    margin: 0.3rem 0 0.6rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.tray-hint:empty {
    display: none;
}

/* The poster's style, under the tray header: the typeface and the text colour */
.tray-style {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    margin: 0.5rem 0 0.2rem;
}

.tray-typeface,
.tray-text-color {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.tray-style-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}

.tray-typeface .custom-font-trigger {
    gap: 0.5rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
}

.tray-typeface .custom-font-trigger #currentFontName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tray-typeface .dropdown-chevron {
    font-size: 0.6rem;
}

.tray-typeface .custom-font-options-list {
    right: auto;
    width: 16rem;
    max-height: 320px;
}

.text-color-swatches {
    display: flex;
    gap: 0.3rem;
}

.text-color-swatch {
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    background: var(--swatch-color);
    box-shadow: 0 0 0 1px var(--border-subtle);
    cursor: pointer;
}

.text-color-swatch.selected {
    box-shadow: 0 0 0 2px var(--brand-primary);
}

.text-color-swatch:focus-visible {
    outline: 2px solid var(--brand-highlight);
    outline-offset: 2px;
}

.text-color-custom {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}

.text-color-custom .studio-color-input {
    width: 26px;
    height: 26px;
}

.text-color-custom .color-hex-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Not enough room below (e.g. the tray docked low in the window): the list opens upwards */
.custom-font-options-list.open-up {
    top: auto;
    bottom: calc(100% + 0.35rem);
}

/* The rows form one list: shared borders, rounded only at its ends */
.selected-quote-row {
    position: relative;
    background: #FFFFFF;
    border: 1px solid var(--border-subtle);
    margin-top: -1px;
    min-width: 0;
}

.selected-quote-row:first-child {
    margin-top: 0;
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
}

.selected-quote-row:last-child {
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

.selected-quote-row.open {
    z-index: 1;
    background: var(--brand-accent-light);
    border-color: var(--brand-accent);
}

.quote-row-header {
    display: flex;
    align-items: center;
    min-width: 0;
}

.quote-row-toggle {
    flex: 1;
    min-width: 0;
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.4rem 0.35rem 0.75rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    font: inherit;
    text-align: left;
    color: var(--text-main);
    cursor: pointer;
}

.quote-row-toggle:hover:not(:disabled) {
    background: #F8FAFC;
}

.quote-row-toggle:focus-visible {
    outline: 2px solid var(--brand-highlight);
    outline-offset: -2px;
}

.quote-row-toggle:disabled {
    cursor: default;
}

.quote-row-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.86rem;
}

/* The open row's editor shows the full text */
.selected-quote-row.open .quote-row-text {
    visibility: hidden;
}

.quote-row-editor {
    padding: 0 0.75rem 0.75rem;
}

.quote-idx-badge {
    flex: none;
    min-width: 1.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--brand-accent);
}

.quote-author-tag {
    flex: none;
    max-width: 35%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.remove-quote-btn {
    flex: none;
    align-self: stretch;
    width: 40px;
    background: transparent;
    border: none;
    color: #EF4444;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease;
}

/* Touch screens: 44 px targets */
@media (pointer: coarse) {
    .quote-row-toggle {
        min-height: 44px;
    }

    .remove-quote-btn {
        width: 44px;
    }
}

/* Phones: the quote gets the whole row */
@media (max-width: 640px) {
    .quote-row-toggle .quote-author-tag {
        display: none;
    }
}

.remove-quote-btn:hover {
    background: #FEE2E2;
}

.quote-item-textarea {
    width: 100%;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0.5rem;
    font-family: inherit;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--text-main);
    box-sizing: border-box;
    resize: vertical;
}

.quote-item-textarea:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 2px rgba(89, 124, 135, 0.15);
}

/* Automatic line breaks toggle under the quote editor */
.line-break-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    margin-top: 0.4rem;
    font-size: 0.78rem;
}

.line-break-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
}

.line-break-hint {
    color: var(--text-muted);
}

.vertical-position-group {
    margin-top: 0.75rem;
}

.control-hint {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-muted);
}

/* Feature 17: Layout Style Customizer */
.layout-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.layout-card {
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.85rem 0.5rem;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-fast);
    background: var(--bg-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.layout-card:hover {
    border-color: #CBD5E1;
    transform: translateY(-2px);
}

.layout-card.selected {
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 2px rgba(89, 124, 135, 0.2);
    background: #F7FAFA;
}

.layout-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-accent);
}

.layout-card-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-main);
}

.layout-card-desc {
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* Segmented Control */
.segmented-control {
    display: flex;
    background: #F1F5F9;
    padding: 0.25rem;
    border-radius: var(--radius-md);
    gap: 0.25rem;
}

.segment-btn {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.segment-btn.active {
    background: var(--brand-primary);
    color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.conditional-control-group {
    margin-top: 1rem;
    padding: 0.85rem;
    background: #F8FAFC;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
}

.conditional-control-group.hidden {
    display: none;
}

.input-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.5rem;
}

/* Sliders */
.slider-control-item {
    margin-top: 1rem;
}

.slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}

.slider-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
}

.slider-value {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--brand-accent);
    background: #E2E8F0;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
}

.studio-slider {
    width: 100%;
    accent-color: var(--brand-accent);
    cursor: pointer;
}

/* Feature 18: Typography & Color Controls */
.custom-font-dropdown-wrapper {
    position: relative;
}

.custom-font-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.85rem;
    background: #FFFFFF;
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    text-align: left;
}

.custom-font-options-list {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    background: #FFFFFF;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-elevated);
    z-index: 50;
    max-height: 220px;
    overflow-y: auto;
}

.custom-font-options-list.hidden {
    display: none;
}

.font-option-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.font-option-item:hover,
.font-option-item:focus-visible,
.font-option-item.selected {
    background: #F1F5F9;
}

.font-option-item:focus-visible {
    outline: 2px solid var(--brand-highlight);
    outline-offset: -2px;
}

.font-preview-name {
    font-size: 0.95rem;
}

.font-preview-cat {
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* Palette Swatches */
.palette-swatches-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.palette-swatch-card {
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.4rem;
    background: var(--bg-surface);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    transition: var(--transition-fast);
}

.palette-swatch-card.selected {
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 2px rgba(89, 124, 135, 0.25);
}

.swatch-preview {
    width: 100%;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
}

.swatch-inner-text {
    font-weight: 700;
    font-size: 0.9rem;
}

.swatch-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-main);
    text-align: center;
}

.custom-color-inputs-row {
    display: flex;
    gap: 1rem;
    margin-top: 0.75rem;
}

.color-input-item {
    flex: 1;
}

.color-mini-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.color-picker-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.studio-color-input {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0;
    cursor: pointer;
}

.color-hex-label {
    font-size: 0.8rem;
    font-family: monospace;
    font-weight: 700;
    color: var(--text-main);
}

/* Feature 19: Product Variant & Size Selection Panel */
.purchase-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
}

.purchase-price-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 1rem;
}

.price-wrapper {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.price-currency {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-muted);
}

.price-val {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-main);
}

.tax-tag {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.variant-fieldset {
    border: none;
    padding: 0;
    margin: 0 0 1rem 0;
}

.variant-legend {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.5rem;
}

.selected-val-hint {
    font-weight: 500;
    color: var(--text-muted);
}

/* Size Pills (Poster) */
.size-pill-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.variant-pill {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.35rem;
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: #FFFFFF;
    cursor: pointer;
    transition: var(--transition-fast);
}

.variant-pill:hover {
    border-color: #CBD5E1;
}

.variant-pill.selected {
    border-color: var(--brand-accent);
    background: #F7FAFA;
    box-shadow: 0 0 0 1px var(--brand-accent);
}

.pill-badge {
    position: absolute;
    top: -7px;
    background: var(--brand-highlight);
    color: #FFFFFF;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 9999px;
}

.pill-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-main);
}

.pill-dim {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.pill-price {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--brand-primary);
    margin-top: 2px;
}

/* Frame Options (Poster) */
.frame-option-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.frame-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem 0.4rem;
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: #FFFFFF;
    cursor: pointer;
    transition: var(--transition-fast);
}

.frame-card:hover {
    border-color: #CBD5E1;
}

.frame-card.selected {
    border-color: var(--brand-accent);
    background: #F7FAFA;
    box-shadow: 0 0 0 1px var(--brand-accent);
}

.frame-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-main);
}

.frame-surcharge {
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* T-Shirt Size & Color */
.tshirt-size-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.4rem;
}

.tshirt-size-btn {
    padding: 0.6rem 0.3rem;
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: #FFFFFF;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
    cursor: pointer;
    transition: var(--transition-fast);
}

.tshirt-size-btn:hover {
    border-color: #CBD5E1;
}

.tshirt-size-btn.selected {
    border-color: var(--brand-accent);
    background: #F7FAFA;
    box-shadow: 0 0 0 1px var(--brand-accent);
}

.color-swatch-grid {
    display: flex;
    gap: 0.75rem;
}

.color-swatch-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border: 1.5px solid var(--border-subtle);
    border-radius: 9999px;
    background: #FFFFFF;
    cursor: pointer;
    transition: var(--transition-fast);
}

.color-swatch-btn:hover {
    border-color: #CBD5E1;
}

.color-swatch-btn.selected {
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 1px var(--brand-accent);
}

.swatch-indicator {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--swatch-color);
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.swatch-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-main);
}

/* Add to Cart CTA */
.btn-add-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.9rem 1.5rem;
    background: var(--brand-primary);
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 700;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    margin-top: 1rem;
}

.btn-add-cart:hover {
    background: var(--brand-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
}

.btn-add-cart:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.cta-divider {
    opacity: 0.6;
}

.cta-price {
    font-weight: 800;
}

/* Feature 16: Sticky Product Preview Canvas */
.preview-panel {
    position: sticky;
    top: 5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.mockup-switcher-bar {
    display: flex;
    justify-content: center;
}

.mockup-pill-control {
    width: 100%;
    max-width: 360px;
}

.mockup-stage-wrapper {
    background: #FFFFFF;
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-elevated);
    border: 1px solid var(--border-subtle);
}

#mockupContainer {
    position: relative;
    width: 100%;
    /* The square stage fits the window under the sticky header, tabs and padding */
    max-width: max(18rem, calc(100vh - 13rem));
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: #EAEFF2;
    /* The room preview sizes the frame in cqw: % of the stage's width */
    container-type: inline-size;
}

#backgroundMockupImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
}

#svgOverlayContainer {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

#svgOverlayContainer svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.12));
    transition: filter 0.3s ease;
}

/* Shown on the poster area when no quote is selected */
.empty-poster-state {
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.85);
    border: 2px dashed #CBD5E1;
}

/* Nothing picked yet: a faded example collage with a label on top */
.example-poster {
    width: 100%;
    height: 100%;
    display: flex;
    opacity: 0.3;
}

.example-poster svg {
    width: 100%;
    height: 100%;
}

.example-poster-label {
    position: absolute;
    inset: auto 8% 50%;
    width: auto;
    height: auto;
    transform: translateY(50%);
    background: rgba(255, 255, 255, 0.92);
    color: var(--brand-primary);
}

.undo-clear-btn {
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    font-weight: 700;
    color: var(--brand-accent);
    text-decoration: underline;
    cursor: pointer;
}

.selected-quotes-empty {
    margin: 0;
    padding: 1rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-md);
    text-align: center;
}

/* The design's border line only shows the paper's edge on screen (print files drop it): a frame
   or the room's wall does that instead */
.mockup-mode-poster.stage-view-room #svgOverlayContainer svg > rect:first-of-type,
.mockup-mode-poster:not([data-frame="unframed"]) #svgOverlayContainer svg > rect:first-of-type {
    stroke: none;
}

/* In a room: the paper at its real size on the room photo. RoomPreview (layout.js) sets the
   variables from the room's scale and the size and frame picked. */
.mockup-mode-poster.stage-view-room #svgOverlayContainer {
    left: var(--room-poster-left, 37.5%);
    top: var(--room-poster-top, 20%);
    width: var(--room-poster-width, 25%);
    height: var(--room-poster-height, 35%);
    background: #FFFFFF;
    isolation: isolate;
    /* An unframed print casts a soft shadow on the wall */
    box-shadow: 0 0.2cqw 0.6cqw rgba(45, 35, 25, 0.22), 0 0.05cqw 0.12cqw rgba(45, 35, 25, 0.2);
}

.mockup-mode-poster.stage-view-room #svgOverlayContainer svg {
    filter: none;
}

/* The poster is too small in a room for the "Pick quotes" and example labels: it stays blank or faded */
.mockup-mode-poster.stage-view-room .empty-poster-state {
    display: none;
}

/* The room's light on the paper and the print */
.mockup-mode-poster.stage-view-room #svgOverlayContainer::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: var(--room-light, none);
    background-blend-mode: multiply;
    mix-blend-mode: multiply;
}

/* The frame, in both pictures: Gelato's 12 mm face around the paper, lit from the top left. Its
   shadow falls on the wall, and its inner edge shades the paper a little. */
.mockup-mode-poster.stage-view-room {
    --frame-face: var(--room-frame, 0px);
}

.mockup-mode-poster.stage-view-poster {
    --frame-face: var(--poster-frame, 0px);
}

.mockup-mode-poster.stage-view-room:not([data-frame="unframed"]) #svgOverlayContainer {
    box-shadow: none;
}

.mockup-mode-poster:not([data-frame="unframed"]) #svgOverlayContainer svg {
    filter: none;
}

.mockup-mode-poster:not([data-frame="unframed"]) #svgOverlayContainer::before {
    --face: max(2px, var(--frame-face)); /* browsers draw thinner borders as 1 px */
    content: "";
    position: absolute;
    inset: calc(-1 * var(--face));
    z-index: 1;
    pointer-events: none;
    border: var(--face) solid var(--frame-colour);
    border-image: linear-gradient(135deg, var(--frame-light), var(--frame-colour) 45%, var(--frame-dark)) 1;
    box-shadow: 0 0.3cqw 0.8cqw rgba(35, 25, 15, 0.28),
                0 0.06cqw 0.15cqw rgba(35, 25, 15, 0.3),
                inset 0.06cqw 0.1cqw 0.25cqw rgba(0, 0, 0, 0.16);
}

.mockup-mode-poster[data-frame="white_wood"] {
    --frame-colour: #ECECE8;
    --frame-light: #F8F8F6;
    --frame-dark: #D3D3CE;
}

.mockup-mode-poster[data-frame="black_wood"] {
    --frame-colour: #232425;
    --frame-light: #3D3E40;
    --frame-dark: #121212;
}

.mockup-mode-poster[data-frame="natural_oak"] {
    --frame-colour: #DBC39D;
    --frame-light: #EBDABD;
    --frame-dark: #BFA176;
}

.mockup-mode-poster[data-frame="dark_wood"] {
    --frame-colour: #3B2213;
    --frame-light: #5C3A22;
    --frame-dark: #23130A;
}

/* In a room: the room thumbnails, centred on the stage's top edge between Share and Save */
.room-picker {
    position: absolute;
    top: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: none;
    padding: 0.2rem;
    gap: 0.25rem;
    border-radius: 999px;
    background: rgba(33, 52, 58, 0.86);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.mockup-mode-poster.stage-view-room .room-picker {
    display: flex;
}

.room-thumb {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    background: none;
    overflow: hidden;
    cursor: pointer;
}

.room-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.room-thumb[aria-pressed="true"] {
    border-color: #FFFFFF;
}

.room-thumb:focus-visible {
    outline: 2px solid var(--brand-highlight);
    outline-offset: 2px;
}

/* Poster view: the room photo fades out and the poster fills the stage height (5:7, as rendered) */
.mockup-mode-poster.stage-view-poster #backgroundMockupImg {
    opacity: 0;
}

.mockup-mode-poster.stage-view-poster #svgOverlayContainer {
    /* RoomPreview (layout.js) makes room for the frame picked; these are the unframed poster */
    top: var(--poster-view-top, 4%);
    width: var(--poster-view-width, calc(84% * 5 / 7));
    height: var(--poster-view-height, 84%);
    left: var(--poster-view-left, calc((100% - 84% * 5 / 7) / 2));
}

/* Poster | In a room, centred on the stage's bottom edge between Shuffle and Enlarge */
.stage-view-switch {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    padding: 0.2rem;
    gap: 0.2rem;
    border-radius: 999px;
    background: rgba(33, 52, 58, 0.86);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.stage-view-btn {
    padding: 0.3rem 0.75rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    font: 500 0.8125rem/1 "Roboto", sans-serif;
    white-space: nowrap;
    cursor: pointer;
}

.stage-view-btn.active {
    background: #FFFFFF;
    color: var(--brand-primary);
}

.stage-view-btn:focus-visible {
    outline: 2px solid var(--brand-highlight);
    outline-offset: 2px;
}

.mockup-mode-tshirt #svgOverlayContainer {
    width: 36.5%;
    left: 34.1%;
    top: 24%;
    aspect-ratio: 314 / 375;
}

.mockup-mode-tshirt #svgOverlayContainer svg {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
    mix-blend-mode: multiply;
}

.stage-spinner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.stage-spinner-overlay.hidden {
    display: none;
}

/* The preview opens a larger view when clicked */
#mockupContainer {
    cursor: zoom-in;
    /* The stage's controls adapt to its width (small stages: icon-only Shuffle and Enlarge) */
    container-type: inline-size;
}

@container (max-width: 380px) {
    .enlarge-preview-btn .stage-btn-label {
        display: none;
    }

    .enlarge-preview-btn {
        padding: 0.4rem;
    }

    .stage-view-btn {
        padding-inline: 0.55rem;
        font-size: 0.75rem;
    }
}

.enlarge-preview-btn {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.8rem;
    border: none;
    border-radius: 999px;
    background: rgba(33, 52, 58, 0.86);
    color: #FFFFFF;
    font: 500 0.8125rem/1 "Roboto", sans-serif;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    transition: var(--transition-fast);
}

.enlarge-preview-btn:hover,
.enlarge-preview-btn:focus-visible {
    background: var(--brand-primary-hover);
}

.enlarge-preview-btn:focus-visible {
    outline: 2px solid var(--brand-highlight);
    outline-offset: 2px;
}

/* Shuffle sits on the stage too, opposite Enlarge */
.stage-shuffle-btn {
    right: auto;
    left: 0.75rem;
}

.stage-shuffle-btn.hidden {
    display: none;
}

/* Large poster preview (native <dialog>) */
dialog.poster-lightbox {
    position: fixed;
    inset: 0;
    margin: auto;
    width: 96vw;
    height: 94vh;
    max-width: none;
    max-height: none;
    border: none;
    border-radius: 16px;
    padding: 0;
    background: #FFFFFF;
    box-shadow: var(--shadow-elevated);
    overflow: hidden;
    z-index: 10000;

    opacity: 0;
    transform: scale(0.97);
    transition-property: transform, opacity, display, overlay;
    transition-duration: 0.25s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    transition-behavior: allow-discrete;
}

dialog.poster-lightbox[open] {
    display: flex;
    flex-direction: column;
    opacity: 1;
    transform: scale(1);

    @starting-style {
        opacity: 0;
        transform: scale(0.97);
    }
}

dialog.poster-lightbox::backdrop {
    background-color: rgba(15, 23, 42, 0);
    transition-property: background-color, display, overlay;
    transition-duration: 0.25s;
    transition-behavior: allow-discrete;
}

dialog.poster-lightbox[open]::backdrop {
    background-color: rgba(15, 23, 42, 0.7);

    @starting-style {
        background-color: rgba(15, 23, 42, 0);
    }
}

.lightbox-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
}

.lightbox-heading {
    margin: 0 0.5rem 0 0;
    font-size: 1.05rem;
    color: var(--text-main);
}

.lightbox-zoom .segment-btn {
    min-width: 4.25rem;
}

.lightbox-toolbar .lightbox-close {
    position: static;
    margin-left: auto;
}

.lightbox-toolbar .shuffle-btn {
    margin-left: auto;
}

.lightbox-toolbar .shuffle-btn:not(.hidden) + .lightbox-close {
    margin-left: 0;
}

/* Slab collage: try another arrangement (sidebar and large preview) */
.shuffle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: #FFFFFF;
    color: var(--brand-primary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.shuffle-btn:hover {
    border-color: var(--brand-accent);
    background: var(--brand-accent-light);
}

.shuffle-btn:focus-visible {
    outline: 2px solid var(--brand-highlight);
    outline-offset: 2px;
}

/* Under the preview: its own centred line, above the hint */
/* Two-column layout: the tray docks under the preview (TrayDock in layout.js).
   The right column fills the window under the header; the poster gets a little
   smaller and the tray takes the rest, scrolling inside itself. */
body.tray-docked .preview-panel {
    height: calc(100vh - 6rem);
    gap: 0.75rem;
}

body.tray-docked .mockup-stage-wrapper {
    padding: 0.75rem;
}

body.tray-docked #mockupContainer {
    /* 31.5rem: the header, the tray's header and style row, and about 6 tray rows */
    max-width: max(16rem, calc(100vh - 31.5rem));
}

body.tray-docked .preview-utilities {
    display: none;
}

body.tray-docked #selectionTray {
    flex: 1 1 auto;
    min-height: 11rem;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0.85rem 1rem;
    background: #FFFFFF;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-elevated);
}

body.tray-docked #selected-quotes-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.shuffle-btn.hidden {
    display: none;
}

/* The poster stays centred while it fits and scrolls once it is larger (auto margins). */
.lightbox-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: auto;
    padding: 1.5rem;
    background: #E9ECEE;
    overscroll-behavior: contain;
}

.lightbox-stage.zoomed {
    cursor: grab;
}

.lightbox-stage.dragging {
    cursor: grabbing;
    user-select: none;
}

.lightbox-canvas {
    flex: none;
    margin: auto;
    background: #FFFFFF;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.18);
    cursor: zoom-in;
    transition: opacity 0.2s ease;
}

.lightbox-stage.zoomed .lightbox-canvas {
    cursor: inherit;
}

.lightbox-canvas.is-loading {
    opacity: 0.55;
}

.lightbox-canvas svg {
    display: block;
    width: 100%;
    height: 100%;
}

.lightbox-hint {
    margin: 0;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    color: #64748B;
    border-top: 1px solid var(--border-subtle);
}

dialog.poster-lightbox.pinned {
    inset: auto;
    margin: 0;
    max-width: none;
    border-radius: 0;
}

@media (max-width: 640px) {
    dialog.poster-lightbox {
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
    }

    .lightbox-toolbar {
        gap: 0.5rem;
        padding: 0.6rem 0.75rem;
    }

    .lightbox-heading {
        display: none;
    }

    .lightbox-zoom .segment-btn {
        min-width: 3.25rem;
        padding: 0.45rem 0.5rem;
    }

    .lightbox-stage {
        padding: 0.75rem;
    }

    .lightbox-hint {
        display: none;
    }
}

.studio-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #E2E8F0;
    border-top-color: var(--brand-accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

.preview-utilities {
    text-align: center;
}

.preview-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Feature 19: Native <dialog> Cart Drawer */
dialog.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(440px, 100vw);
    height: 100vh;
    max-height: 100vh;
    border: none;
    background: #FFFFFF;
    box-shadow: -10px 0 25px -5px rgba(0, 0, 0, 0.15);
    padding: 0;
    margin: 0;
    z-index: 9999;
    overflow: hidden;

    transform: translateX(100%);
    transition-property: transform, display, overlay;
    transition-duration: 0.35s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    transition-behavior: allow-discrete;
}

dialog.cart-drawer[open] {
    transform: translateX(0);

    @starting-style {
        transform: translateX(100%);
    }
}

dialog.cart-drawer::backdrop {
    background-color: rgba(15, 23, 42, 0);
    backdrop-filter: blur(0px);
    transition-property: background-color, backdrop-filter, display, overlay;
    transition-duration: 0.35s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    transition-behavior: allow-discrete;
}

dialog.cart-drawer[open]::backdrop {
    background-color: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);

    @starting-style {
        background-color: rgba(15, 23, 42, 0);
        backdrop-filter: blur(0px);
    }
}

.cart-drawer-inner {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
}

.cart-title-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.cart-heading {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 0;
}

.cart-count-chip {
    background: #F1F5F9;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 9999px;
}

.cart-icon-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}

.cart-icon-btn:hover {
    color: var(--text-main);
}

/* Shipping Progress Tracker */
.shipping-tracker-card {
    padding: 0.85rem 1.5rem;
    background: #F8FAFC;
    border-bottom: 1px solid var(--border-subtle);
}

.shipping-tracker-msg {
    font-size: 0.8rem;
    color: #334155;
    margin-bottom: 0.4rem;
}

.shipping-bar-track {
    width: 100%;
    height: 6px;
    background: #E2E8F0;
    border-radius: 9999px;
    overflow: hidden;
}

.shipping-bar-fill {
    height: 100%;
    background: var(--brand-accent);
    border-radius: 9999px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.shipping-bar-fill.unlocked {
    background: #10B981;
}

/* Cart Items Scrollport */
.cart-items-scrollport {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
}

.cart-item-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cart-item-card {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 0.85rem;
    padding: 0.85rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: #FFFFFF;
}

.item-thumb-wrap {
    width: 64px;
    height: 80px;
    background: #F1F5F9;
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.item-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

.item-quote-snippet {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--text-muted);
    /* A collage lists its count and first quotes: two lines, then an ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-variant-label {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.item-unit-price {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
    margin-top: 4px;
}

.item-controls-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
}

.item-remove-btn {
    background: transparent;
    border: none;
    color: #94A3B8;
    cursor: pointer;
    padding: 2px;
    border-radius: var(--radius-sm);
    transition: color 0.15s ease;
}

.item-remove-btn:hover {
    color: #E11D48;
}

.item-qty-stepper {
    display: flex;
    align-items: center;
    border: 1px solid #CBD5E1;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.stepper-btn {
    background: #F8FAFC;
    border: none;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    transition: background 0.15s ease;
}

.stepper-btn:hover {
    background: #E2E8F0;
}

.stepper-val {
    width: 26px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-main);
}

/* Empty Cart State */
.cart-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1rem;
    height: 100%;
}

.empty-icon-wrap {
    margin-bottom: 1rem;
    padding: 1rem;
    background: #F1F5F9;
    border-radius: 50%;
}

.empty-heading {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 0.4rem 0;
}

.empty-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0 0 1.5rem 0;
}

/* Cart Footer */
.cart-footer {
    box-sizing: border-box;  /* the base footer rule's width: 100% plus this padding overflowed the drawer on the right */
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--border-subtle);
    background: #F8FAFC;
}

.cart-financial-summary {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #475569;
}

.summary-line.summary-tax {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.summary-line.summary-total {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-main);
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-subtle);
}

.cart-footer-ctas {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.btn-checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem;
    background: var(--brand-primary);
    color: #FFFFFF;
    font-weight: 700;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-checkout:hover:not(:disabled) {
    background: var(--brand-primary-hover);
    transform: translateY(-1px);
}

.btn-checkout:disabled {
    background: #94A3B8;
    cursor: not-allowed;
    opacity: 0.7;
}

.btn-ghost {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

.btn-ghost:hover {
    color: var(--text-main);
}

/* Feature 19: Native <dialog> Simulated Checkout Modal */
dialog.checkout-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    margin: 0;
    width: min(840px, 94vw);
    max-height: 90vh;
    border: none;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: var(--shadow-elevated);
    padding: 0;
    z-index: 10000;
    overflow: hidden;

    opacity: 0;
    transition-property: transform, opacity, display, overlay;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    transition-behavior: allow-discrete;
}

dialog.checkout-modal[open] {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;

    @starting-style {
        transform: translate(-50%, -50%) scale(0.95);
        opacity: 0;
    }
}

dialog.checkout-modal::backdrop {
    background-color: rgba(15, 23, 42, 0);
    backdrop-filter: blur(0px);
    transition-property: background-color, backdrop-filter, display, overlay;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    transition-behavior: allow-discrete;
}

dialog.checkout-modal[open]::backdrop {
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(6px);

    @starting-style {
        background-color: rgba(15, 23, 42, 0);
        backdrop-filter: blur(0px);
    }
}

.checkout-modal-inner {
    position: relative;
    box-sizing: border-box;  /* the padding inside the dialog's 90vh, or its bottom is clipped and can't be scrolled to */
    max-height: 90vh;
    overflow-y: auto;
    padding: 2rem;
}

.modal-close-btn {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: #F1F5F9;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    cursor: pointer;
    transition: var(--transition-fast);
    z-index: 10;
}

.modal-close-btn:hover {
    background: #E2E8F0;
    color: #0F172A;
}

.checkout-phase {
    display: none;
}

.checkout-phase.active {
    display: block;
}

.checkout-modal-header {
    margin-bottom: 1.5rem;
}

.checkout-badge-pill {
    display: inline-block;
    background: #E0E7FF;
    color: #4338CA;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 9999px;
    margin-bottom: 0.4rem;
}

.checkout-heading {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0 0 0.25rem 0;
    color: var(--text-main);
}

.checkout-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

.checkout-form-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.5rem;
}

.checkout-fieldset {
    border: none;
    padding: 0;
    margin: 0 0 1.25rem 0;
}

.checkout-legend {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.75rem;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.75rem;
}

.form-row-split {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 0.75rem;
}

.form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155;
}

.form-input {
    padding: 0.6rem 0.75rem;
    border: 1.5px solid #CBD5E1;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    color: var(--text-main);
    transition: border-color 0.15s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 3px rgba(89, 124, 135, 0.15);
}

.payment-selector-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.payment-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.85rem;
    border: 1.5px solid #CBD5E1;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

.payment-option:hover {
    border-color: #94A3B8;
    background: #F8FAFC;
}

.payment-option.selected {
    border-color: var(--brand-accent);
    background: #EFF6FF;
}

.payment-option-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.payment-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
}

.payment-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Mini Order Summary Sidebar */
.checkout-mini-summary {
    background: #F8FAFC;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1.25rem;
}

.mini-summary-heading {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.85rem 0;
    color: var(--text-main);
}

.mini-items-list {
    max-height: 160px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border-subtle);
}

.mini-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
}

.mini-item-name {
    font-weight: 600;
    color: #1E293B;
}

.mini-item-variant {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.mini-summary-totals {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 1rem;
}

.mini-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: #475569;
}

.mini-row.mini-grand-total {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-main);
    padding-top: 0.4rem;
    border-top: 1px solid var(--border-subtle);
}

.btn-pay {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.85rem;
    background: #10B981;
    color: #FFFFFF;
    font-weight: 700;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-pay:hover {
    background: #059669;
    transform: translateY(-1px);
}

/* Phase 2: Processing Spinner */
.checkout-spinner-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    text-align: center;
}

.checkout-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #E2E8F0;
    border-top-color: var(--brand-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 1.25rem;
}

.processing-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 0.4rem 0;
}

.processing-status {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

/* Phase 3: Order Confirmation Receipt */
.receipt-card {
    text-align: center;
}

.receipt-success-icon-wrap {
    display: inline-flex;
    padding: 0.85rem;
    background: #ECFDF5;
    border-radius: 50%;
    margin-bottom: 0.75rem;
}

.receipt-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 0 0 0.25rem 0;
}

.receipt-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0 0 1.25rem 0;
}

.receipt-order-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    background: #F8FAFC;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.85rem;
    margin-bottom: 1.25rem;
    text-align: left;
}

.meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.meta-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
}

.meta-val {
    font-size: 0.85rem;
    color: var(--text-main);
}

.meta-val.highlight {
    color: #10B981;
}

.receipt-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.82rem;
    margin-bottom: 1rem;
}

.receipt-table th {
    padding: 0.5rem 0.65rem;
    background: #F1F5F9;
    color: #475569;
    font-weight: 700;
}

.receipt-table td {
    padding: 0.65rem;
    border-bottom: 1px solid var(--border-subtle);
    color: #1E293B;
}

.receipt-financial-totals {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
    padding-top: 0.4rem;
    margin-bottom: 1.5rem;
}

.receipt-row {
    display: flex;
    justify-content: space-between;
    width: 220px;
    font-size: 0.82rem;
    color: #475569;
}

.receipt-row.receipt-total {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-main);
    padding-top: 0.35rem;
    border-top: 1px solid var(--border-subtle);
}

.receipt-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

/* Print Styles */
@media print {
    body * {
        visibility: hidden;
    }
    dialog.checkout-modal[open],
    dialog.checkout-modal[open] * {
        visibility: visible;
    }
    dialog.checkout-modal[open] {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        max-height: none;
        box-shadow: none;
    }
    .no-print {
        display: none !important;
    }
}

/* Responsive Breakpoints */
@media (max-width: 992px) {
    .studio-container {
        grid-template-columns: minmax(0, 1fr);
    }
    .preview-panel {
        position: relative;
        top: 0;
        order: -1;
    }
    .checkout-form-grid {
        grid-template-columns: 1fr;
    }
    .receipt-order-meta {
        grid-template-columns: 1fr 1fr;
    }
}

/* Phones: less padding, so the search field and the segmented controls have room */
@media (max-width: 640px) {
    .studio-container {
        padding: 1rem;
        gap: 1.25rem;
    }
    .customizer-card {
        padding: 1rem;
    }
    .search-icon {
        display: none;
    }
    /* One swipeable row of topics instead of several wrapped rows */
    .pills-scroll-wrapper {
        flex-wrap: nowrap;
    }
    .search-submit-btn {
        padding: 0.55rem 0.9rem;
    }
    .segment-btn {
        padding: 0.5rem 0.35rem;
    }
}

/* =========================================================================
   Phone layout (#77, docs/ux_review.md §5): up to 992 px wide on screens at
   least 600 px tall. The preview stays pinned on top, the controls are four
   tabs (Inspiration, Your quotes, Order, Saved) in a bar at the bottom, and
   only the chosen tab's panel scrolls. StudioLayout and PhoneShell in
   layout.js move the tray, the purchase card and the Saved collection into
   their panels. Landscape phones keep the
   stacked page.
   ========================================================================= */
.phone-panel,
.phone-tabbar,
.preview-strip,
.tray-find-quotes {
    display: none;
}

.order-empty-hint {
    margin: 1rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
}

.order-empty-hint[hidden] {
    display: none;
}

@media (max-width: 992px) and (min-height: 600px) {
    html:has(body.studio-body) {
        height: 100%;
        overflow: hidden;
    }

    body.studio-body {
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
    }

    .studio-header {
        position: relative;
        flex: none;
    }

    .header-inner {
        padding: 0.45rem 1rem;
    }

    .brand-logo {
        height: 32px;
    }

    .cart-trigger-btn {
        width: 40px;
        height: 40px;
    }

    /* Header, pinned preview, the chosen tab's panel, the tab bar */
    .studio-container {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        padding: 0;
        gap: 0;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
        grid-template-areas: "preview" "panel" "tabs";
        align-items: stretch;
    }

    /* The preview: a square stage about a third of the screen tall */
    .preview-panel {
        --phone-stage: min(calc(35dvh - 1.5rem), calc(100vw - 3rem));
        grid-area: preview;
        position: relative;
        top: auto;
        order: 0;
        z-index: 2;
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
        padding: 0.5rem 1rem;
        background: var(--bg-page);
        border-bottom: 1px solid var(--border-subtle);
    }

    .mockup-stage-wrapper {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0.4rem;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-card);
    }

    #mockupContainer {
        width: var(--phone-stage);
        max-width: 100%;
    }

    .preview-utilities {
        display: none;
    }

    /* The compact strip: a thumbnail of the poster, the count and "Show preview" */
    .preview-panel.is-compact .mockup-stage-wrapper {
        flex: 0 0 auto;
        padding: 0.2rem;
    }

    .preview-panel.is-compact #mockupContainer {
        width: 3.25rem;
        cursor: pointer;
    }

    .preview-panel.is-compact .enlarge-preview-btn,
    .preview-panel.is-compact .stage-view-switch,
    .preview-panel.is-compact .room-picker,
    .preview-panel.is-compact .example-poster-label,
    .preview-panel.is-compact .stage-spinner-overlay {
        display: none;
    }

    /* The thumbnail always shows the poster itself, not the room */
    .preview-panel.is-compact .mockup-mode-poster #backgroundMockupImg {
        opacity: 0;
    }

    .preview-panel.is-compact .mockup-mode-poster #svgOverlayContainer {
        top: 4%;
        width: calc(84% * 5 / 7);
        height: 84%;
        left: calc((100% - 84% * 5 / 7) / 2);
        background: none;
        box-shadow: none;
    }

    .preview-panel.is-compact .mockup-mode-poster #svgOverlayContainer::before,
    .preview-panel.is-compact .mockup-mode-poster #svgOverlayContainer::after {
        content: none;
    }

    .preview-panel.is-compact .preview-strip {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        min-height: 44px;
        padding: 0 0.25rem;
        border: none;
        background: none;
        font: 600 0.9rem/1.2 'Roboto', sans-serif;
        color: var(--brand-primary);
        cursor: pointer;
    }

    .preview-strip-action {
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--brand-accent);
    }

    /* The tab panels share one place; only the chosen one shows, and it scrolls */
    .controls-panel,
    .phone-panel {
        grid-area: panel;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        /* At most 40rem of content, centred on tablets */
        padding: 1rem max(1rem, (100% - 40rem) / 2);
        gap: 1rem;
        background: var(--bg-surface);
    }

    .phone-panel {
        display: block;
    }

    .controls-panel:focus,
    .phone-panel:focus {
        outline: none;
    }

    body:not([data-phone-tab="quotes"]) #phonePanelQuotes,
    body:not([data-phone-tab="order"]) #phonePanelOrder,
    body[data-phone-tab="quotes"] #controlsPanel,
    body[data-phone-tab="order"] #controlsPanel {
        display: none;
    }

    /* Inside a tab the cards are the panel: no card frame, no step header (the tab names it) */
    .controls-panel .customizer-card,
    .phone-panel .purchase-panel {
        padding: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: none;
    }

    .controls-panel .card-header,
    .phone-panel .card-header {
        display: none;
    }

    .phone-panel .selected-quote-section {
        margin: 0;
        padding: 0;
        border: none;
    }

    .phone-panel .btn-add-cart {
        margin-top: 1.25rem;
    }

    .tray-find-quotes {
        display: block;
        margin: 0.75rem auto 0;
        padding: 0.55rem 1.1rem;
        border: 1px solid var(--brand-accent);
        border-radius: 999px;
        background: #FFFFFF;
        color: var(--brand-primary);
        font: 600 0.875rem/1 'Roboto', sans-serif;
        cursor: pointer;
    }

    /* The tab bar: one row of four tabs, above the iPhone's home indicator */
    .phone-tabbar {
        grid-area: tabs;
        display: flex;
        padding-bottom: env(safe-area-inset-bottom);
        background: #FFFFFF;
        border-top: 1px solid var(--border-subtle);
        box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.05);
    }

    .phone-tab {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        min-height: 56px;
        padding: 0.35rem 0.25rem;
        border: none;
        border-top: 2px solid transparent;
        background: none;
        color: var(--text-muted);
        font: 500 0.75rem/1.1 'Roboto', sans-serif;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .phone-tab[aria-selected="true"] {
        color: var(--brand-primary);
        font-weight: 700;
        border-top-color: var(--brand-primary);
    }

    .phone-tab:focus-visible {
        outline: 2px solid var(--brand-highlight);
        outline-offset: -4px;
    }

    .phone-tab-label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .phone-tab-icon {
        position: relative;
        display: inline-flex;
    }

    .phone-tab-count {
        position: absolute;
        top: -6px;
        left: calc(100% - 6px);
        box-sizing: border-box;
        min-width: 20px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        background: var(--brand-primary);
        color: #FFFFFF;
        font-size: 0.7rem;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
    }

    .phone-tab[aria-selected="true"] .phone-tab-count {
        background: var(--brand-highlight);
        color: var(--brand-primary);
    }
}

/* The preview shrinks and grows smoothly, unless motion is reduced */
@media (max-width: 992px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
    #mockupContainer {
        transition: width 0.25s ease;
    }
}

/* =========================================================================
   Saved quotes and posters (#94): a ♥ next to every quote and on the
   preview, and the Saved collection, a drawer from the header or the Saved
   tab on phones (Favorites in layout.js, FavoritesStore in favorites.js).
   ========================================================================= */
:root {
    --heart-color: #E11D48;
}

.heart-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #94A3B8;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.heart-btn:hover {
    color: var(--heart-color);
    background: #FFF1F2;
}

.heart-btn.is-on {
    color: var(--heart-color);
}

.heart-btn.is-on svg,
.stage-heart-btn.is-on svg {
    fill: currentColor;
}

.heart-btn:focus-visible {
    outline: 2px solid var(--brand-highlight);
    outline-offset: -2px;
}

@media (pointer: coarse) {
    .heart-btn {
        width: 44px;
        height: 44px;
    }
}

/* ♥ Save on the preview: the top right corner, above Enlarge */
.stage-heart-btn {
    top: 0.75rem;
    bottom: auto;
}

.stage-heart-btn[hidden] {
    display: none;
}

.stage-heart-btn.is-on svg {
    color: #FB7185;
}

/* The header's Saved button; phones have the Saved tab instead */
body.phone-shell .favorites-trigger-btn {
    display: none;
}

.favorites-drawer .favorites-heading {
    display: none;
}

.favorites-heading {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-main);
}

.favorites-intro {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.favorites-status {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand-accent);
}

.favorites-status:empty {
    display: none;
}

.favorites-subheading {
    margin: 1.25rem 0 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.favorites-empty {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.favorites-empty[hidden] {
    display: none;
}

.favorites-posters {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.9rem 0.75rem;
}

.favorite-poster {
    position: relative;
    min-width: 0;
}

.favorite-poster-open {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.favorite-poster-thumb {
    display: block;
    aspect-ratio: 5 / 7;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    transition: border-color 0.15s ease;
}

.favorite-poster-thumb svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* The saved render has no embedded font: the page's copy of the same font draws it */
.favorite-poster-thumb text {
    font-family: var(--thumb-family, inherit);
    font-weight: var(--thumb-weight, normal);
}

.favorite-poster-open:hover .favorite-poster-thumb {
    border-color: var(--brand-accent);
}

.favorite-poster-open:focus-visible {
    outline: 2px solid var(--brand-highlight);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.favorite-poster-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.favorite-poster .favorite-remove {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.favorites-quotes {
    list-style: none;
    margin: 0;
    padding: 0;
}

.favorite-quote {
    display: flex;
    align-items: center;
    margin-top: -1px;
    padding-right: 0.35rem;
    background: #FFFFFF;
    border: 1px solid var(--border-subtle);
}

.favorite-quote:first-child {
    margin-top: 0;
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
}

.favorite-quote:last-child {
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

.favorite-quote-add {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.4rem 0.6rem 0.85rem;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.favorite-quote-add:focus-visible {
    outline: 2px solid var(--brand-highlight);
    outline-offset: -2px;
}

.favorite-quote:hover {
    background: #F8FAFC;
}

.favorite-quote-text {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.4;
    color: #1E293B;
    overflow-wrap: anywhere;
}

.favorite-quote-author {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.76rem;
    color: var(--text-muted);
}

/* Opening a saved poster over an unsaved one asks first */
dialog.replace-poster-dialog {
    width: min(420px, calc(100vw - 2rem));
    box-sizing: border-box;
    padding: 1.5rem;
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-elevated);
}

dialog.replace-poster-dialog::backdrop {
    background: rgba(15, 23, 42, 0.5);
}

.replace-poster-heading {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-main);
}

.replace-poster-text {
    margin: 0 0 1.25rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #334155;
}

.replace-poster-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.replace-poster-actions button {
    padding: 0.55rem 1rem;
    font-size: 0.875rem;
}

.replace-poster-actions [hidden] {
    display: none;
}

/* Phones: the Saved tab's panel */
@media (max-width: 992px) and (min-height: 600px) {
    body:not([data-phone-tab="saved"]) #phonePanelSaved,
    body[data-phone-tab="saved"] #controlsPanel {
        display: none;
    }
}

/* =========================================================================
   Share links (#100): Share on the preview and on every saved poster
   (ShareLink in layout.js). The button says "Link copied" for a moment.
   ========================================================================= */
.stage-share-btn {
    top: 0.75rem;
    bottom: auto;
    right: auto;
    left: 0.75rem;
}

.stage-share-btn[hidden] {
    display: none;
}

.share-btn.is-copied,
.stage-share-btn.is-copied {
    background: var(--brand-accent);
    color: #FFFFFF;
}

.favorite-poster .favorite-share {
    position: absolute;
    top: 0.3rem;
    left: 0.3rem;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.favorite-poster .favorite-share:hover {
    color: var(--brand-primary);
    background: #FFFFFF;
}

/* Stripe checkout (#136): Stripe's embedded form in a dialog, and the order page it returns to */
dialog.stripe-checkout-modal {
    width: min(560px, 94vw);
}

.stripe-checkout-status:empty {
    display: none;
}

.stripe-checkout-status {
    margin: 0 0 1rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.stripe-checkout-status.is-error {
    color: #DC2626;
}

#stripeCheckoutForm {
    min-height: 2rem;
}

.stripe-checkout-marketing {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.25rem;
    padding: 0.85rem 1rem;
    background: var(--brand-accent-light);
    border-radius: var(--radius-md);
    color: var(--text-main);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}

.stripe-checkout-marketing-note {
    color: var(--text-muted);
    font-weight: 400;
}

.stripe-checkout-marketing input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--brand-primary);
}

.stripe-checkout-paid-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.stripe-checkout-paid-actions .btn-checkout {
    padding: 0.6rem 1.2rem;
}

.checkout-badge-pill.order-state-paid {
    background: #DCFCE7;
    color: #166534;
}

.checkout-badge-pill.order-state-open {
    background: #FEF3C7;
    color: #92400E;
}

body.order-page {
    min-height: 100vh;
    margin: 0;
    padding: 3rem 1rem;
    box-sizing: border-box;
    background: var(--bg-page);
}

.order-card {
    max-width: 560px;
    margin: 0 auto;
    padding: 2rem;
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-elevated);
}

.order-lines {
    width: 100%;
    margin: 1.5rem 0 0.5rem;
    border-collapse: collapse;
    font-size: 0.9rem;
    color: var(--text-main);
}

.order-lines td {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

.order-lines tfoot td {
    border-bottom: none;
    font-weight: 700;
}

.order-lines .order-qty {
    color: var(--text-muted);
    white-space: nowrap;
    padding: 0.5rem 0.75rem;
}

.order-lines .order-amount {
    text-align: right;
    white-space: nowrap;
}

.order-ref {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.order-back {
    margin-top: 1.5rem;
    text-decoration: none;
}

/* After payment, the marketing opt-in asked once more (_marketing_ask.html) */
.marketing-ask {
    margin-top: 1.25rem;
    padding: 1rem 1.1rem;
    background: var(--brand-accent-light);
    border-radius: var(--radius-md);
    color: var(--text-main);
}

.marketing-ask[hidden],
.marketing-ask [hidden] {
    display: none;
}

.marketing-ask-title {
    margin: 0 0 0.3rem;
    font-weight: 700;
}

.marketing-ask-text {
    margin: 0 0 0.85rem;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.marketing-ask-yes {
    padding: 0.55rem 1.1rem;
    font-size: 0.9rem;
}

.marketing-ask-done {
    margin: 0;
    font-weight: 600;
    color: #166534;
}