/**
 * Prints Custom Theme Stylesheet (Plain CSS)
 */

.header.content {
    padding-top: 10px !important;
}

.header.content .logo {
    margin-top: 0 !important;
    margin-bottom: 5px !important;
}

.page-main {
    padding-top: 0 !important;
}

/* Force Magento's native container wrapper blocks to drop their large spacing */
.page-footer {
    margin-top: 0 !important; /* Wipes out the big gap between the main body content and footer */
    padding-top: 6px !important; /* Drops Luma's default deep top cushion */
    padding-bottom: 6px !important; /* Drops Luma's default deep bottom cushion */
}

.footer.content {
    padding-top: 0 !important; /* Brings your flex columns flush to the boundary line */
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Category pages: Luma positions the top product-list toolbar
   absolutely over the grid, reserving space for it with padding-top on
   .column.main only when a layered-nav sidebar is present
   (.page-with-filter). These category pages have no sidebar, so that
   padding is never added and the toolbar sat directly on top of the
   first row of products - the "obscured by the thumbnail" complaint.
   The top toolbar instance (grid/list switcher, "X Items" count) is now
   dropped entirely (see the Magento_Catalog::product/list/toolbar.phtml
   override), but this still matters for the bottom (pager) instance. */
.page-layout-1column .toolbar-products {
    /* !important: the theme's own compiled styles-l.css carries the same
       selector at the same specificity and loads after this file, so it
       would otherwise win and put the toolbar straight back on top of
       the grid. */
    position: static !important;
}

/* Luma's own .products { margin: 30px 0; } is what actually pushed the
   grid down below the page title once the toolbar above it was emptied
   out - the 30px top margin collapses through the (now otherwise empty)
   .column.main, showing up as dead space under the heading rather than
   around the toolbar. Dropped to 0 on category pages only. */
.catalog-category-view .products.wrapper.grid.products-grid {
    margin-top: 0;
}
/* Custom Flexbox Footer Layout Framework */
.prints-footer-wrapper {
    width: 100%;
    padding: 6px 0 6px 0; /* Reduced top and bottom padding from 40px down to a slim 10px */
}

.prints-footer-columns {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center; /* Forces all uneven column heights to perfectly lock-align in the vertical middle */
    flex-wrap: wrap; /* Guarantees mobile layout responsiveness */
    width: 100%;
}

.prints-footer-col {
    flex: 1;
    min-width: 250px; /* Prevents columns from getting squished on smaller tablets */
    margin-bottom: 6px;
    color: #212121; /* Your near-black brand color choice */
}

/* Typography and Spacing Overrides */
.prints-footer-col h3 {
    color: #212121;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.prints-footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.prints-footer-col ul li {
    line-height: 1.8; /* Generates wide, readable text rows */
    margin-bottom: 8px;
}

.prints-footer-col ul li a {
    color: #212121; /* Keeps the hyperlink color unified with the plain text typography */
    text-decoration: none;
    font-size: 12px;
    transition: opacity 0.2s ease;
}

.prints-footer-col ul li a:hover {
    opacity: 0.7; /* Provides a subtle, native hover response animation */
    text-decoration: underline;
}

/* Whole "Select Your Photo" add-to-cart form moved directly below the
   product title, above price/SKU/reviews - a pure visual reorder via
   flex order, so no core block/layout wiring has to move. */
.product-info-main {
    display: flex;
    flex-direction: column;
}

.product-info-main .page-title-wrapper {
    order: -2;
}

.product-info-main .product-add-form {
    order: -1;
}

.poster-photo-upload {
    margin-bottom: 20px;
}

.action.secondary.poster-select-photo {
    display: block;
    width: 100%;
    font-size: 18px;
    padding: 16px;
    background: #ffd400;
    border-color: #ffd400;
    color: #000;
}

.action.secondary.poster-select-photo:hover,
.action.secondary.poster-select-photo:focus,
.action.secondary.poster-select-photo:active {
    background: #e6bf00;
    border-color: #e6bf00;
    color: #000;
}

.action.secondary.poster-select-photo:disabled,
.action.secondary.poster-select-photo[disabled] {
    background: #ccc;
    border-color: #ccc;
    color: #777;
    cursor: not-allowed;
}

/* Lives in the .actions area right above the Add to Cart/"Frame your
   picture" button now, not inside the dropzone (item 3) - styled to
   match the width/spacing of the button it sits above. */
.action.secondary.poster-confirm-crop {
    display: block;
    width: 100%;
    font-size: 18px;
    padding: 16px;
    margin: 0 0 14px;
    background: #ffd400;
    border-color: #ffd400;
    color: #000;
}

.action.secondary.poster-confirm-crop:hover,
.action.secondary.poster-confirm-crop:focus,
.action.secondary.poster-confirm-crop:active {
    background: #e6bf00;
    border-color: #e6bf00;
    color: #000;
}

.action.secondary.poster-confirm-crop:disabled,
.action.secondary.poster-confirm-crop[disabled] {
    background: #ccc;
    border-color: #ccc;
    color: #777;
    cursor: not-allowed;
}

.poster-upload-supports {
    margin: 8px 0 0;
    font-size: 12px;
}

.poster-imperial-note {
    margin: -8px 0 18px;
    font-size: 12px;
}

.poster-crop-instructions {
    font-size: 14px;
    color: #fff;
    background: #000;
    padding: 8px 12px;
    margin: 0 0 10px;
    display: inline-block;
}

.poster-crop-stage {
    width: 100%;
    max-height: 60vh;
}

.poster-crop-image {
    display: block;
    max-width: 100%;
}

/* Item 4: Cropper.js's vendored CSS only enlarges the bottom-right (se)
   corner handle on narrow screens, leaving the other three corners at a
   fixed 5px - too small to reliably grab with a finger. These rules give
   all four corners the same larger, higher-contrast treatment at every
   breakpoint (specificity beats the vendor file's plain ".cropper-point"
   rules regardless of load order, so no !important needed), with the
   offsets adjusted so each handle stays centred on its actual corner. */
.poster-crop-stage .cropper-point {
    opacity: 0.9;
}

.poster-crop-stage .cropper-point.point-ne,
.poster-crop-stage .cropper-point.point-nw,
.poster-crop-stage .cropper-point.point-se,
.poster-crop-stage .cropper-point.point-sw {
    width: 22px;
    height: 22px;
    background-color: #ffd400;
    border: 2px solid #000;
    border-radius: 50%;
    box-sizing: border-box;
}

.poster-crop-stage .cropper-point.point-ne,
.poster-crop-stage .cropper-point.point-nw {
    top: -11px;
}

.poster-crop-stage .cropper-point.point-se,
.poster-crop-stage .cropper-point.point-sw {
    bottom: -11px;
}

.poster-crop-stage .cropper-point.point-nw,
.poster-crop-stage .cropper-point.point-sw {
    left: -11px;
}

.poster-crop-stage .cropper-point.point-ne,
.poster-crop-stage .cropper-point.point-se {
    right: -11px;
}

.poster-crop-stage .cropper-line.line-e,
.poster-crop-stage .cropper-line.line-w {
    width: 14px;
}

.poster-crop-stage .cropper-line.line-n,
.poster-crop-stage .cropper-line.line-s {
    height: 14px;
}

.poster-dropzone {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: #fff;
    border: 2px dashed #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    padding: 20px;
}

.poster-dropzone-dragover {
    border-color: #1979c3;
    background: #f4f9fd;
}

.poster-dropzone-empty {
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.poster-dropzone-preview {
    max-width: 100%;
    max-height: 100%;
    text-align: center;
}

.poster-dropzone-preview-image {
    max-width: 100%;
    max-height: 70vh;
    display: block;
    margin: 0 auto 12px;
}

.poster-dropzone-preview-filename {
    font-size: 13px;
    color: #777;
    margin: 0 0 12px;
}

.poster-dropzone-status {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 13px;
}

.poster-upload-progress {
    width: 80%;
    max-width: 320px;
    text-align: center;
}

.poster-upload-progress-track {
    height: 10px;
    background: #ddd;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 8px;
}

.poster-upload-progress-bar {
    height: 10px;
    width: 0;
    background: #1979c3;
    border-radius: 5px;
    transition: width 0.2s ease;
}

.poster-upload-progress-label {
    display: block;
    font-size: 13px;
    color: #555;
}

.poster-options {
    margin-bottom: 20px;
}

.poster-options .field {
    margin-bottom: 14px;
}

/* The core .label sits flush against the dropdown/size-pills beneath it
   with no gap of its own - this is shared by Poster/Framing/Canvas alike,
   since all three render their "Choose Print Style"/"Size" headings via
   this same .field > .label markup. */
.poster-options .field > .label {
    display: block;
    margin-bottom: 8px;
}

.poster-option-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Sizes stack one per row instead of wrapping as variable-width pills,
   so every box's right-hand border lines up at the same length
   regardless of how long its label text is. Framing's and Canvas's own
   size lists have their own data-roles (see [data-role="framing-size-options"]/
   [data-role="canvas-size-options"] in addtocart.phtml) rather than
   "poster-size-options", so they're listed alongside it here to get the
   same single-column stack rather than duplicating the rule. */
[data-role="poster-size-options"],
[data-role="framing-size-options"],
[data-role="canvas-size-options"] {
    flex-direction: column;
    flex-wrap: nowrap;
}

.poster-option {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
}

.poster-option input[type="radio"] {
    margin-right: 6px;
}

.poster-style-select {
    max-width: 320px;
}

.poster-option label {
    cursor: pointer;
}

.poster-selected-price {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 14px;
}

/* Two-column info list: each .info-set-item sits in its own 50% column,
   vertically centred against its row-mate, text kept left-aligned. */
.info-set {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 10px;
}

.info-set-item {
    display: flex;
    align-items: center;
    flex: 0 0 50%;
    max-width: 50%;
    box-sizing: border-box;
    padding-right: 16px;
    text-align: left;
    font-size: 12px;
    line-height: 1.6;
    color: #212121;
}

/* Framing product page: reuses .poster-option/.poster-style-select as-is
   (see .framing-option/.framing-style-select below, both applied alongside
   the shared classes rather than replacing them). */
.framing-configure-error {
    color: #e02b27;
    margin-top: 10px;
}

/* Framing configurator page (Stage 1 shell): two columns - a fixed-width
   preview on the left, the (currently empty) sections placeholder filling
   the rest on the right. Stacks on narrow screens. */
.framing-configurator {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.framing-configurator-preview-column {
    flex: 0 0 570px;
    max-width: 570px;
}

.framing-configurator-preview {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

/* Canvas's own preview drops the border Framing's own preview keeps - it
   reads as a distracting frame-within-a-frame around the 3D mock-up,
   since the mock-up already has its own visible edges. */
[data-role="canvas-preview"] {
    border: none;
}

.framing-configurator-preview img,
.framing-configurator-preview svg {
    display: block;
    width: 100%;
    height: auto;
}

.framing-enlarge-button {
    margin-top: 12px;
    width: 100%;
}

.framing-configurator-sections {
    flex: 1 1 420px;
    min-width: 280px;
}

@media (max-width: 768px) {
    .framing-configurator-preview-column {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* Full-screen "Enlarge" overlay. */
.framing-enlarge-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-sizing: border-box;
}

.framing-enlarge-slot .framing-configurator-preview {
    border: none;
    width: 90vw;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* "auto" alone isn't enough to make a replaced element (svg/img) with its
   own small intrinsic width/height attributes actually grow - it only
   stops it shrinking. Giving it an explicit large box (90vw/90vh) plus
   object-fit:contain is what makes the enlarged view actually appear
   large, scaled proportionally either way up. */
.framing-enlarge-slot .framing-configurator-preview img,
.framing-enlarge-slot .framing-configurator-preview svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.framing-enlarge-close {
    position: absolute;
    top: 20px;
    right: 30px;
    background: none;
    border: none;
    color: #fff;
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 10px;
}

body.framing-enlarge-open {
    overflow: hidden;
}

/* Stage 2: Sections 1-6 (Frame Range/Frame/Mount(s)/Glazing/Paper/Size). */
.framing-section {
    margin-bottom: 22px;
}

.framing-section-title {
    margin: 0 0 8px;
    font-size: 14px;
}

.framing-section-title strong {
    font-weight: 700;
}

.framing-section-selected-label {
    font-weight: 400;
}

/* Item 3: the mount subheadings ("Mount:"/"Top mount:"/"Bottom mount:")
   sit directly under the Add/Remove mount buttons rather than in their own
   .framing-section, so they need their own top spacing. */
.framing-section-mount .framing-section-title {
    margin-top: 14px;
}

/* Styled the same as the upload page's own small italic notes (see
   .poster-imperial-note). */
.framing-mount-optional-note {
    margin-left: 8px;
    font-size: 12px;
    color: #333;
}

/* Small-text option buttons, no visible native radio, selected = deep gold
   with white text (easy to swap later once the theme design is finalised -
   see .framing-option.is-selected below). Scoped to the configurator
   sections only - the product page's own Style/Size picker deliberately
   stays plain ".poster-option" (see framing-options.js), matching the
   Poster page exactly rather than using this smaller button style. */
.framing-configurator-sections .framing-option-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.framing-configurator-sections .framing-option {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.3;
    cursor: pointer;
    background: #fff;
    color: #212121;
}

.framing-configurator-sections .framing-option.is-selected {
    background: #b8860b;
    color: #fff;
    border-color: #b8860b;
}

.framing-mount-width-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    font-size: 13px;
}

.framing-mount-width-row .framing-option-grid {
    gap: 6px;
}

/* Section 2: Frame thumbnails with a tick overlay when selected. */
.framing-frame-thumb {
    position: relative;
    width: 58px;
    height: 75px;
    border: 1px solid #ccc;
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
}

.framing-frame-thumb img:not(.framing-tick) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.framing-frame-thumb.is-selected {
    border-color: #000;
}

.framing-tick {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 9px;
    transform: translate(-50%, -50%);
}

/* Section 3: mount colour swatches with a tick overlay when selected. */
.framing-mount-swatch-grid {
    gap: 6px;
}

.framing-mount-swatch {
    position: relative;
    width: 32px;
    height: 32px;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
}

.framing-mount-swatch.is-selected {
    border-color: #000;
    border-width: 2px;
}

/* Stage 3: Section 7 (Total). */
.framing-total-amount-final {
    font-size: 20px;
    font-weight: 700;
}

/* Stage 4: Section 8 (Add to Cart). */
.framing-addtocart-button {
    width: 100%;
    padding: 12px;
    font-size: 16px;
}

.framing-addtocart-button:disabled {
    opacity: 0.6;
    cursor: default;
}

.framing-addtocart-error {
    margin-top: 8px;
    color: #d32f2f;
    font-size: 13px;
}

/* Hover-tooltip callout - frame thumbnails' description on mouseover. */
.framing-tooltip {
    position: absolute;
    z-index: 10000;
    background: #212121;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    max-width: 240px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.framing-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #212121 transparent transparent transparent;
}

/* Framing's own category listing items skip the "From £x" price-box
   Poster/Canvas render in the same spot (brief item 27: no prices at all
   for Framing) - that price-box's own margin is what was giving Poster/
   Canvas their gap above "View Details", so Framing's own button sits
   noticeably closer to the product name without it. See the
   "product-item-framing" class added in list.phtml. */
.product-item-framing .product-item-actions {
    margin-top: 10px;
}