/* Copyright © Anim8design Ltd. All rights reserved. */
/**
 * Prints Custom Theme Stylesheet (Plain CSS)
 */
/* ==========================================================================
   flex info
   ========================================================================== */ 
.info-container {
  display: flex;
  flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.info-item {
  padding: 10px 16px 10px 10px;
  text-align: left;
font-weight: 400;
line-height: 1.62857143;
  flex: 47%;
}

/* Make a one column-layout instead of a two-column layout */
@media (max-width: 768px) {
  .info-item {
    flex: 100%;
  }
}

.info-item h2 {
	margin: 16px 0px 10px 0px;
	text-align: left;
}

.info-item h3 {
	font-size: medium;
    font-weight: 600;
	margin-top: 0px;
	margin-bottom: 6px;
	line-height: 1.42857143;
}
.info-item li {
	font-weight: 400;
	margin-top: 0px;
	margin-bottom: 4px;
	line-height: 1.62857143;
}

.info-item ol > li::marker {
  font-weight: bold;
}
    
.steps h3 {
    font-size: 14px;
    margin-top: 18px; 
    }

.faq-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 768px) {
    .faq-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.faq-card {
    border: 1px solid #01579B;
    border-radius: 6px;
    padding: 2px;
    display: flex;
    flex-direction: column;
}

.faq-card a:hover {
  color: #fff;
  text-decoration-line: none;
  background: #0091EA;
}

.faq-card a {
    text-align: center;
    padding: 8px;
    background: #ffffff;  
    border-radius: 6px;
  color: #01579B;
        font-size: 16px;
    font-weight: 600;
  text-decoration: none;
}
/* Two-column info list: each .info-set-item sits in its own 50% column,
   two per row. Inside an item, column direction so a heading + paragraph
   (or any multiple children) stack on top of each other instead of
   sitting side by side, and justify-content:center vertically centres
   that stacked content within the item's own height. */
.info-set {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

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

/* Make a one-column layout instead of a two-column layout, matching the
   same 768px breakpoint used elsewhere in this file (e.g. .info-item). */
@media (max-width: 768px) {
    .info-set-item {
        flex: 0 0 100%;
        max-width: 100%;
        padding-right: 0;
    }
}

.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;
}

/* Item 2: on mobile only, hides the product title once the crop photo
   flow has confirmed a crop (see photo-uploader.js's
   _refreshSubmitState, which toggles .photo-crop-confirmed on
   .product-info-main) - saves a scroll past text the customer doesn't
   need any more at that point, on a page that's already grown taller
   from the media column's own extra content (see _syncMediaHeight).
   Desktop/tablet have the room to keep it, so this only applies below
   the same 768px breakpoint the rest of this module's own CSS uses. */
@media (max-width: 768px) {
    .product-info-main.photo-crop-confirmed .page-title-wrapper {
        display: none;
    }
}

.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 directly under the upload box itself, in the same left-hand
   media column as the photo (not inside the dropzone's own
   absolutely-positioned overlay, and not over in the form's .actions
   area) - see _buildDropzone/_startCrop in photo-uploader.js. Sits
   inside .poster-crop-actions alongside Change Photo once a photo's
   uploaded (see that selector below), which overrides the width/margin
   here to put the two side by side. */
.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;
}

/* Still in
   the same left-hand media column as the photo, directly under the
   upload box (not inside the dropzone's own absolutely-positioned
   overlay, and not over in the form's .actions area) - see
   _buildDropzone in photo-uploader.js. Kept block-level (not
   inline-block) now that it's on its own line in normal page flow
   rather than floating over the image. Top margin matters here more
   than it used to: the dropzone above is position:absolute, so it
   contributes nothing to $media's own layout flow - without it this
   would sit flush against the box with no breathing room. */
.poster-crop-instructions {
    font-size: 14px;
    color: #fff;
    background: #000;
    padding: 8px 12px;
    margin: 10px 0;
    display: block;
    text-align: center;
}

.poster-crop-stage {
    position: relative;
    width: 100%;
    max-height: 60vh;
    /* Deliberately no overflow:hidden here - the yellow corner handles
       below are positioned with a negative offset (-11px) so half of
       each one deliberately sits outside the crop box's own edge, which
       is itself often flush against this stage's edge (Cropper's own
       autoCropArea:1 default). Clipping overflow here cuts those handles
       in half whenever that happens - confirmed live. poster-crop-image's
       own max-height below is what actually keeps a tall portrait photo
       contained; this stage's max-height is just the layout box it's
       sized to fit inside. position:relative is only here so the rotate
       buttons below can anchor to this box specifically, not some
       further-out ancestor. */
}

/* The rotate-crop and two rotate-image buttons, sitting just below the
   crop image rather than overlaid on it - autoCropArea:1 (see
   _initCropper in photo-uploader.js) puts the crop box's own
   corner-drag-handles flush against the stage's corners by default,
   which collided with an overlaid control there (confirmed live).
   flex-wrap so three text-bearing buttons still fit on a narrow phone
   screen without being squeezed. */
.poster-crop-rotate {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 10px 0;
}

.poster-rotate-button {
    min-width: 36px;
    height: 36px;
    border-radius: 18px;
    background: #ffd400;
    border: 2px solid #000;
    color: #000;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    padding: 0 12px;
    cursor: pointer;
    box-sizing: border-box;
    white-space: nowrap;
}

/* Sized up well past the button's own 14px text (see the span wrapper
   in photo-uploader.js) - at the plain button font-size the rotate
   glyph read as a vague blob rather than a recognisable arrow
   (confirmed live). vertical-align keeps the now-larger glyph's
   baseline sitting level with the text next to it rather than pushing
   it up. */
.poster-rotate-symbol {
    font-size: 22px;
    vertical-align: middle;
    display: inline-block;
}

.poster-rotate-button:hover,
.poster-rotate-button:focus,
.poster-rotate-button:active {
    background: #e6bf00;
}

/* The Change Photo/Confirm Crop pair - both buttons are moved in here
   by photo-uploader.js once there's a photo to crop (see
   _startCrop/_buildDropzone), and the width:100% each one sets on its
   own (above) is overridden here so they sit side by side instead of
   stacked. */
.poster-crop-actions {
    display: flex;
    gap: 10px;
    margin: 0 0 14px;
}

.poster-crop-actions .action.secondary.poster-select-photo,
.poster-crop-actions .action.secondary.poster-confirm-crop {
    width: auto;
    flex: 1 1 0;
    margin: 0;
}

.poster-crop-image {
    display: block;
    max-width: 100%;
    /* Was unconstrained on this axis - fine for a landscape photo (width
       is always the limiting side there), but a portrait photo has height
       as its larger dimension, so with only max-width set it could render
       taller than the poster-crop-stage box above ever intended to allow,
       pushing out past it and hiding the page content below (confirmed
       live on mobile). Matching max-height here keeps it properly
       contained in both orientations. */
    max-height: 60vh;
}

/* 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;
}

/* 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;
}

/* AdditionalElements_ReviewEmail: customer-uploaded review photos, shown
   on the approved product review list - see the theme's overridden
   Magento_Review/templates/product/view/list.phtml. */
.review-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}

.review-photo-thumb {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* AdditionalElements_ReviewEmail: Recent Reviews widget (Block\Widget\
   RecentReviews / view/frontend/templates/widget/recent_reviews.phtml) -
   four cards per row, reducing to two per row on small screens. */
.recent-reviews-title {
    text-align: center;
    margin-bottom: 20px;
}

.recent-reviews-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 768px) {
    .recent-reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.recent-review-card {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.recent-review-product-link {
    text-decoration: none;
    color: #212121;
}

.recent-review-product-thumb {
    display: block;
    max-width: 100%;
    max-height: 120px;
    margin: 0 auto 4px;
    object-fit: contain;
}

.recent-review-product-name {
    font-weight: 600;
    font-size: 14px;
    margin: 0 0 6px;
    text-align: center;
}

/* Read-only star display - same star glyph/gold-fill look as
   .review-form-rating .star-rating-star (review-form.css), reimplemented
   here under its own selector so this widget's styling doesn't depend on
   that stylesheet being loaded on every page it's placed on. No outline/
   drop-shadow here (unlike the form version) - a plain grey outline for
   the unfilled star reads as lighter/cleaner at this smaller size. */
.recent-review-stars {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.recent-review-stars .star-rating-star {
    display: inline-block;
    margin: 0;
    padding: 0 1px;
    font-size: 18px;
    line-height: 1;
    color: #ccc;
}

.recent-review-stars .star-rating-star:before {
    content: '\2605';
}

.recent-review-stars .star-rating-star.is-active {
    color: #ffd400;
}

.recent-review-title {
    font-weight: 600;
    font-size: 13px;
    margin: 0 0 4px;
    text-align: center;
}

/* Truncated by Model\Widget\RecentReviews's own script (see
   recent_reviews.phtml) rather than a CSS line-clamp, so the "read more"
   button can be a normal inline child sitting right after the cut-off
   text, on the same (third) line, rather than on a line of its own. */
.recent-review-detail {
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 6px;
    text-align: center;
}

.recent-review-readmore {
    display: inline;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    color: #1979c3;
    font-size: 13px;
    line-height: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.recent-review-nickname {
    font-size: 12px;
    color: #666;
    margin: 0 0 6px;
    text-align: center;
}

.recent-review-photos {
    justify-content: center;
}

.recent-review-photos .review-photo-thumb {
    width: 60px;
    height: 60px;
}