/**
 * HAC Fine Art Print Configurator
 * hac-print-configurator.css
 *
 * Scoped to .hac-print-configurator — the class on the scaffold wrapper div.
 *
 * Depends on configurator.css being enqueued first. That file provides:
 *   .hac-dropdown and all children, .hac-btn variants, .hac-btn__spinner,
 *   .hac-loading, .hac-load-error, all --hac-* custom properties.
 *
 * This file adds only print-specific layout and components that don't exist
 * in configurator.css. It does not redefine anything already defined there.
 */

/* ============================================================================
   Scope — inherits all --hac-* tokens from .hac-configurator via configurator.css
   We redeclare them here so the print page works even if the APC page hasn't
   set them on a parent element.
   ============================================================================ */

.hac-print-configurator {
    --hac-bg:            var(--global-palette3, #1c1c1e);
    --hac-bg-raised:     #26262a;
    --hac-bg-card:       #2e2d2b;
    --hac-border:        rgba(193, 168, 123, 0.2);
    --hac-border-strong: rgba(193, 168, 123, 0.45);

    --hac-text:          var(--global-palette7, #f5e9c9);
    --hac-text-muted:    var(--global-palette6, #c1a87b);
    --hac-text-subtle:   var(--global-palette5, #b09060);

    --hac-gold:          var(--global-palette6, #c1a87b);
    --hac-gold-deep:     var(--global-palette5, #8a7454);
    --hac-gold-light:    var(--global-palette8, #e9dbb8);
    --hac-crimson:       var(--global-palette1, #7a1f1f);

    --hac-font-heading:  var(--global-heading-font-family, 'Cinzel', serif);
    --hac-font-body:     var(--global-body-font-family, 'EB Garamond', serif);

    --hac-radius:        4px;
    --hac-radius-lg:     8px;
    --hac-shadow:        0 2px 12px rgba(0, 0, 0, 0.45);
    --hac-transition:    0.18s ease;

    font-family: var(--hac-font-body);
    color:       var(--hac-text);
    background:  var(--hac-bg);
    padding:     2rem 1.5rem 4rem;
    -webkit-font-smoothing: antialiased;
}

.hac-print-configurator *,
.hac-print-configurator *::before,
.hac-print-configurator *::after {
    box-sizing: border-box;
}

/* ============================================================================
   Loading / Error
   Reuses .hac-loading and .hac-load-error from configurator.css for the
   full-page states. These IDs get those classes applied by the scaffold /
   default state. The overrides below just handle the inline states.
   ============================================================================ */

#hac-print-loading {
    display:     flex;
    align-items: center;
    gap:         0.6rem;
    font-family: var(--hac-font-body);
    font-size:   1.1rem;
    font-style:  italic;
    color:       var(--hac-text-muted);
    padding:     3rem 0;
    justify-content: center;
}

#hac-print-loading::before {
    content:       '';
    display:       inline-block;
    width:         1em;
    height:        1em;
    border:        2px solid rgba(193, 168, 123, 0.2);
    border-top-color: var(--hac-gold);
    border-radius: 50%;
    animation:     hac-spin 0.7s linear infinite;
    flex-shrink:   0;
}

#hac-print-error {
    display:       none;
    padding:       0.85rem 1rem;
    margin-bottom: 1.5rem;
    border-left:   3px solid var(--hac-crimson);
    background:    rgba(122, 31, 31, 0.12);
    color:         #e87070;
    border-radius: 0 var(--hac-radius) var(--hac-radius) 0;
    font-size:     0.9rem;
    line-height:   1.5;
}

#hac-print-error a {
    color:           inherit;
    text-decoration: underline;
}

/* ============================================================================
   Layout — the scaffold has three sibling divs inside .hac-print-configurator:
     #hac-print-image-preview (left column, sticky)
     #hac-print-options       (right column)
     #hac-print-size          (right column, below options)

   We use a CSS grid on the parent and span the right-column items into col 2.
   ============================================================================ */

.hac-print-configurator {
    display:    block;
    max-width:  var(--global-content-width, 1290px);
    margin:     0 auto;
}

/* Full-width mockup row */
#hac-print-image-preview {
    width:         100%;
    margin-bottom: 2rem;
}

/* Controls row — centered, constrained width */
.hac-print-controls {
    display:       flex;
    flex-direction: column;
    gap:           0.5rem;
    max-width:     680px;
    margin:        0 auto;
}

#hac-print-chip-bar {
    /* inherits flex child */
}

#hac-print-options,
#hac-print-size {
    /* inherits flex child */
}

/* Loading and error banners */
#hac-print-loading,
#hac-print-error {
    margin-bottom: 1rem;
}

@media ( max-width: 860px ) {
    .hac-print-controls {
        max-width: 100%;
    }
}

/* ============================================================================
   Quick-order (EZ config) shortcuts
   ============================================================================ */

.hac-print-ez-buttons {
    padding-bottom: 1rem;
    margin-bottom:  0.5rem;
    border-bottom:  1px solid var(--hac-border-strong);
}

.hac-print-ez-buttons__row {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.5rem;
    margin-top: 0.5rem;
}

/* The shortcut links reuse .hac-print-option-btn but are anchors, so reset the
   link defaults and let them size to their content. */
a.hac-print-ez-btn {
    display:         inline-block;
    text-decoration: none;
}

a.hac-print-ez-btn:hover {
    text-decoration: none;
}

/* ============================================================================
   Image preview card
   ============================================================================ */

.hac-print-preview-card {
    background:    var(--hac-bg-raised);
    border:        1px solid var(--hac-border-strong);
    border-radius: var(--hac-radius-lg);
    /* overflow:hidden removed — it was clipping the box-shadow.
       The image children have their own border-radius to maintain rounded corners. */
    box-shadow:    0 0 0 1px rgba(193, 168, 123, 0.08),
                   0 8px 32px rgba(0, 0, 0, 0.55),
                   0 0 48px rgba(193, 168, 123, 0.09),
                   0 0 80px rgba(138, 116, 84, 0.12);
}

/* Re-apply rounding to the image children that previously relied on the card's overflow:hidden */
.hac-print-preview__mockup-wrap,
.hac-print-preview__img-wrap {
    border-radius: var(--hac-radius-lg) var(--hac-radius-lg) 0 0;
}

/* Skeleton state — shown while image entry is fetching */
.hac-print-preview-card--skeleton .hac-print-preview__img-wrap {
    background: linear-gradient(
        90deg,
        var(--hac-bg-raised) 25%,
        color-mix(in srgb, var(--hac-gold-deep) 12%, var(--hac-bg-raised)) 50%,
        var(--hac-bg-raised) 75%
    );
    background-size: 200% 100%;
    animation: hac-shimmer 1.6s infinite;
}

.hac-print-preview-card--skeleton .hac-print-preview__meta {
    height:     3.5rem;
    margin:     1rem 1.25rem;
    background: linear-gradient(
        90deg,
        var(--hac-bg-raised) 25%,
        color-mix(in srgb, var(--hac-gold-deep) 12%, var(--hac-bg-raised)) 50%,
        var(--hac-bg-raised) 75%
    );
    background-size: 200% 100%;
    border-radius:   var(--hac-radius);
    animation: hac-shimmer 1.6s infinite;
}

@keyframes hac-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.hac-print-preview-card::before {
    content:       '';
    display:       block;
    width:         2.5rem;
    height:        2px;
    background:    var(--hac-gold-deep);
    margin:        1.25rem 1.25rem 0;
}

.hac-print-preview__img-wrap {
    position:   relative;
    width:       100%;
    padding-top: 100%;
    overflow:    hidden;
    background:  #0f0d08;
}

.hac-print-preview__img-wrap--hidden,
.hac-print-preview__mockup-wrap--hidden {
    display: none;
}

/* Full-width mockup skeleton — 16:9 to match background image */
.hac-print-mockup-skeleton {
    width:         100%;
    aspect-ratio:  16 / 9;
    border-radius: var(--hac-radius-lg) var(--hac-radius-lg) 0 0;
    background:    linear-gradient(
        90deg,
        var(--hac-bg-raised) 25%,
        color-mix(in srgb, var(--hac-gold-deep) 10%, var(--hac-bg-raised)) 50%,
        var(--hac-bg-raised) 75%
    );
    background-size: 200% 100%;
    animation:     hac-shimmer 1.6s infinite;
}

/* Mockup canvas — full width, height auto from 16:9 canvas aspect ratio */
.hac-print-preview__mockup-wrap {
    width:         100%;
    overflow:      hidden;
    border-radius: var(--hac-radius-lg) var(--hac-radius-lg) 0 0;
    background:    #0f0d08;
}

.hac-print-mockup-canvas {
    display: block;
    width:   100%;
    height:  auto;
}

/* Toggle button */
.hac-print-mockup-toggle {
    display:        block;
    width:          100%;
    background:     transparent;
    border:         none;
    border-top:     1px solid var(--hac-border);
    color:          var(--hac-text-subtle);
    cursor:         pointer;
    font-family:    var(--hac-font-heading);
    font-size:      0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding:        0.5rem;
    text-align:     center;
    transition:     color var(--hac-transition);
}

.hac-print-mockup-toggle:hover {
    color: var(--hac-gold);
}

.hac-print-preview__img-bg {
    position:       absolute;
    inset:          -10%;
    width:          120%;
    height:         120%;
    object-fit:     cover;
    filter:         blur(12px) brightness(0.55) saturate(0.85);
    pointer-events: none;
    z-index:        0;
}

/* Foreground — contains the image at natural aspect ratio */
.hac-print-preview__img-fg {
    position:   absolute;
    inset:      0;
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: contain;
    z-index:    1;
}

.hac-print-preview__meta {
    padding: 1rem 1.25rem 1.25rem;
}

.hac-print-preview__title {
    font-family:    var(--hac-font-heading);
    font-size:      0.95rem;
    letter-spacing: 0.04em;
    color:          var(--hac-gold);
    margin:         0 0 0.4rem;
    line-height:    1.35;
}

.hac-print-preview__desc {
    font-size:   0.85rem;
    color:       var(--hac-text-subtle);
    font-style:  italic;
    line-height: 1.55;
    margin:      0;
}

/* ============================================================================
   Active selection chip bar
   Uses .hac-chip and .hac-chip__* classes from configurator.css — no
   additional chip styles needed here.
   ============================================================================ */

#hac-print-chip-bar {
    grid-column:   2;
    grid-row:      2;
    padding:       0.25rem 0 0.5rem;
    display:       flex;
    flex-wrap:     wrap;
    gap:           0.5rem;
    align-items:   center;
    min-height:    0;
}

#hac-print-chip-bar:empty {
    display: none;
}

/* Push options and size sections down one row when chip bar is present —
   now handled by explicit grid-row assignments above, not needed. */

/* ============================================================================
   Config sections (#hac-print-options, #hac-print-size)
   Both get the same card treatment as .hac-pack-config in configurator.css.
   ============================================================================ */

#hac-print-options,
#hac-print-size {
    background:    var(--hac-bg-raised);
    border:        1px solid var(--hac-border);
    border-radius: var(--hac-radius-lg);
    padding:       1.5rem;
}

#hac-print-options::before,
#hac-print-size::before {
    content:       '';
    display:       block;
    width:         2.5rem;
    height:        2px;
    background:    var(--hac-gold-deep);
    margin-bottom: 1.25rem;
}


/* Section title — same as .hac-section-title */
.hac-print-section-title {
    font-family:    var(--hac-font-heading);
    font-size:      1rem;
    font-weight:    600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--hac-gold);
    margin:         0 0 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom:  1px solid var(--hac-border);
}

/* ============================================================================
   Field rows (label + dropdown)
   ============================================================================ */

.hac-print-field {
    margin-bottom: 1.25rem;
}

.hac-print-field:last-child {
    margin-bottom: 0;
}

.hac-print-field__label {
    display:        block;
    font-family:    var(--hac-font-heading);
    font-size:      0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--hac-text-muted);
    margin-bottom:  0.45rem;
}

/* Dropdowns fill their field width */
.hac-print-field .hac-dropdown {
    width: 100%;
}

/* Hint text below a field label */
.hac-print-field__hint {
    font-size:   0.82rem;
    font-style:  italic;
    color:       var(--hac-gold-light);
    margin:      -0.2rem 0 0.6rem;
    line-height: 1.45;
}

/* Ratio orientation groups */
.hac-print-ratio-group {
    margin-bottom: 0.75rem;
}

.hac-print-ratio-group:last-child {
    margin-bottom: 0;
}

.hac-print-ratio-group__label {
    display:        block;
    font-family:    var(--hac-font-heading);
    font-size:      0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--hac-text-subtle);
    margin-bottom:  0.35rem;
}

/* Category header divider inside substrate dropdown */
.hac-dropdown__header {
    padding:        0.35rem 0.85rem 0.2rem;
    font-family:    var(--hac-font-heading);
    font-size:      0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--hac-gold-deep);
    border-top:     1px solid var(--hac-border);
    margin-top:     0.2rem;
    cursor:         default;
    user-select:    none;
}

.hac-dropdown__header:first-child {
    border-top: none;
    margin-top: 0;
}

/* Placeholder style on the trigger */
.hac-dropdown__trigger--placeholder {
    color:      var(--hac-text-subtle);
    font-style: italic;
}

/* ============================================================================
   Finishing option buttons
   ============================================================================ */

.hac-print-option-group {
    margin-bottom: 1rem;
}

.hac-print-option-group__label {
    font-family:    var(--hac-font-heading);
    font-size:      0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--hac-text-muted);
    margin:         0 0 0.45rem;
}

.hac-print-option-group__items {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.4rem;
}

.hac-print-option-btn {
    background:    transparent;
    border:        1px solid var(--hac-border-strong);
    border-radius: var(--hac-radius);
    color:         var(--hac-text-muted);
    font-family:   var(--hac-font-body);
    font-size:     0.875rem;
    padding:       0.35rem 0.8rem;
    cursor:        pointer;
    transition:    background var(--hac-transition), color var(--hac-transition),
                   border-color var(--hac-transition);
}

.hac-print-option-btn:hover {
    background:   rgba(193, 168, 123, 0.1);
    color:        var(--hac-text);
    border-color: var(--hac-gold);
}

.hac-print-option-btn--selected {
    background:   var(--hac-gold-deep);
    color:        var(--hac-gold-light);
    border-color: var(--hac-gold-deep);
}

/* ============================================================================
   Pricing block
   ============================================================================ */

.hac-print-pricing__row {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    margin-bottom:   0.4rem;
}

.hac-print-pricing__label {
    font-family:    var(--hac-font-heading);
    font-size:      0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--hac-text-muted);
}

.hac-print-pricing__value {
    font-family: var(--hac-font-heading);
    font-size:   1.15rem;
    font-weight: 600;
    color:       var(--hac-gold);
}

/* Inline note — used for "Calculated at checkout" beside Shipping label */
.hac-print-pricing__note-inline {
    font-size:  0.82rem;
    color:      var(--hac-text-subtle);
    font-style: italic;
}

.hac-print-pricing__loading {
    font-family: var(--hac-font-body);
    font-style:  italic;
    font-size:   0.88rem;
    color:       var(--hac-text-subtle);
    animation:   hac-pulse 1.1s ease-in-out infinite;
}

@keyframes hac-pulse {
    0%, 100% { opacity: 0.35; }
    50%       { opacity: 1;    }
}

/* ============================================================================
   Divider between option groups and pricing
   ============================================================================ */

.hac-print-divider {
    border:     none;
    border-top: 1px solid var(--hac-border);
    margin:     1.25rem 0;
}

/* ============================================================================
   CTA button — .hac-btn.hac-btn--primary.hac-btn--lg comes from configurator.css;
   this just adds top margin in context.
   ============================================================================ */

#hac-print-order-btn {
    margin-top: 1.25rem;
}

/* ============================================================================
   No-options / no-sizes message
   ============================================================================ */

.hac-print-no-options {
    color:      var(--hac-text-subtle);
    font-style: italic;
    font-size:  0.9rem;
    margin:     0;
}

/* Fix white page background on fine-art-print — theme defaults to white.
   Target body so the colour extends to viewport edges before content paints. */
body.page-fine-art-print,
body.page-fine-art-print #inner-wrap,
body.page-fine-art-print #content,
body.page-fine-art-print .content-area,
body.page-fine-art-print main {
    background: #1c1c1e !important;
}

/* Fallback — catch-all for themes that don't add page slug body class */
#inner-wrap {
    background: #1c1c1e;
}

/* ============================================================================
   Crop prompt — shown when no standard sizes match the image's aspect ratio
   ============================================================================ */

.hac-print-crop-prompt {
    padding:       0.25rem 0;
}

.hac-print-crop-prompt__msg {
    font-size:   0.9rem;
    color:       var(--hac-text-muted);
    font-style:  italic;
    line-height: 1.6;
    margin:      0 0 1rem;
}

/* ============================================================================
   Crop modal overlay — redeclared here so it works even if configurator.css
   is not loaded or not scoped to this page.
   ============================================================================ */

.hac-print-crop-overlay.hac-modal-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0, 0, 0, 0.82);
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         99999;
    animation:       hac-fade-in 0.15s ease;
}

@keyframes hac-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================================================
   Crop modal dialog — same, self-contained here as a fallback
   ============================================================================ */

.hac-print-crop-modal.hac-modal {
    background:     #26262a;   /* solid — must not be transparent */
    border-radius:  8px;
    padding:        2rem;
    width:          90%;
    max-height:     90vh;
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
}

/* ============================================================================
   Crop modal — extended styles
   ============================================================================ */

.hac-print-crop-modal {
    max-width:     780px;
    border:        1px solid var(--hac-gold-deep) !important;
    box-shadow:    0 0 0 4px color-mix(in srgb, var(--hac-gold-deep) 15%, transparent),
                   0 8px 32px rgba(0,0,0,0.6) !important;
}

.hac-print-crop-modal .hac-modal__title {
    color:       var(--hac-text, #e8e0d0);
    font-size:   1.2rem;
    margin:      0 0 0.5rem;
}

.hac-print-crop-modal .hac-modal__body {
    color:       var(--hac-text-muted, #b8a98a);
    font-size:   0.95rem;
    line-height: 1.6;
    margin:      0 0 1rem;
}

.hac-print-crop-wrap {
    position:      relative;  /* Cropper.js overlays are position:absolute — must anchor here */
    width:         100%;
    height:        460px;
    overflow:      hidden;
    background:    #0f0d08;
    border:        2px solid var(--hac-gold-deep);
    border-radius: var(--hac-radius);
    margin-bottom: 1.25rem;
    box-shadow:    0 0 0 4px color-mix(in srgb, var(--hac-gold-deep) 15%, transparent);
}

.hac-print-crop-img {
    display:   block;
    max-width: 100%;
    /* Cropper.js will take over sizing — this just prevents layout flash */
}

/* Zoom controls */
.hac-print-crop-zoom {
    display:     flex;
    align-items: center;
    gap:         0.6rem;
    margin-bottom: 1rem;
}

.hac-print-crop-zoom__label {
    font-size:   0.8rem;
    color:       var(--hac-text-muted, #b8a98a);
    min-width:   2.5rem;
    flex-shrink: 0;
}

.hac-print-crop-zoom__btn {
    background:  transparent;
    border:      1px solid var(--hac-gold-deep);
    color:       var(--hac-gold-deep);
    width:       1.8rem;
    height:      1.8rem;
    border-radius: 50%;
    cursor:      pointer;
    font-size:   1rem;
    line-height: 1;
    flex-shrink: 0;
    display:     flex;
    align-items: center;
    justify-content: center;
    transition:  background 0.15s;
}

.hac-print-crop-zoom__btn:hover {
    background: color-mix(in srgb, var(--hac-gold-deep) 15%, transparent);
}

.hac-print-crop-zoom__slider {
    flex:        1;
    accent-color: var(--hac-gold-deep);
    height:      4px;
    cursor:      pointer;
}

/* Cropper.js overrides — match the dark APC aesthetic */
.hac-print-crop-overlay .cropper-view-box,
.hac-print-crop-overlay .cropper-face {
    border-radius: 0;
}

.hac-print-crop-overlay .cropper-line {
    background-color: var(--hac-gold);
}

.hac-print-crop-overlay .cropper-point {
    background-color: var(--hac-gold);
}

.hac-print-crop-overlay .cropper-view-box {
    outline-color: var(--hac-gold);
}

/* Button row */
.hac-print-crop-modal .hac-modal__btns {
    display:     flex;
    gap:         0.75rem;
    justify-content: flex-end;
    padding-top: 0.25rem;
}

.hac-print-crop-modal .hac-btn--ghost {
    border:     1px solid var(--hac-gold, #c9a84c);
    color:      var(--hac-gold, #c9a84c);
    padding:    0.6rem 1.4rem;
    background: transparent;
    opacity:    1 !important;
}

.hac-print-crop-modal .hac-btn--ghost:hover {
    background: color-mix(in srgb, var(--hac-gold) 15%, transparent);
}

.hac-print-crop-modal .hac-btn--primary {
    padding:    0.6rem 1.4rem;
    opacity:    1 !important;
    background: var(--hac-gold, #c9a84c) !important;
    color:      #0f0d08 !important;
}

/* Spinner — visible on dark background */
.hac-btn__spinner {
    display:       inline-block;
    width:         0.9em;
    height:        0.9em;
    border:        2px solid rgba(255,255,255,0.3);
    border-top:    2px solid #fff;
    border-radius: 50%;
    animation:     hac-spin 0.7s linear infinite;
    vertical-align: middle;
}

@keyframes hac-spin {
    to { transform: rotate(360deg); }
}

/* ── WooCommerce product page — fine-art-print ───────────────────────────────
   Match View Cart button width to Add to Cart button so they look like a
   deliberate pair rather than one narrow + one full-width. */
.product .cart .added_to_cart,
.product .cart a.added_to_cart {
    display:    inline-block;
    width:      auto;
    margin-top: 0.5rem;
}

/* Substrate area loading spinner — shown while products API call completes */
.hac-print-options-spinner {
    display:         flex;
    justify-content: center;
    align-items:     center;
    padding:         2rem 0;
    min-height:      4rem;
}

.hac-print-options-spinner .hac-btn__spinner {
    width:        1.5rem;
    height:       1.5rem;
    border-width: 3px;
}

.hac-app-shell {
    --hac-bg: var(--global-palette3, #1c1c1e);
    --hac-bg-raised: #26262a;
    --hac-bg-card: #2e2d2b;
    --hac-border: rgba(193, 168, 123, 0.2);
    --hac-border-strong: rgba(193, 168, 123, 0.45);
    --hac-text: var(--global-palette7, #f5e9c9);
    --hac-text-muted: var(--global-palette6, #c1a87b);
    --hac-text-subtle: var(--global-palette5, #b09060);
    --hac-gold: var(--global-palette6, #c1a87b);
    --hac-gold-deep: var(--global-palette5, #8a7454);
    --hac-gold-light: var(--global-palette8, #e9dbb8);
    --hac-font-heading: var(--global-heading-font-family);
    --hac-font-body: var(--global-body-font-family);
    --hac-radius: 4px;
    --hac-radius-lg: 8px;
    --hac-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
    --hac-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.55);
    --hac-transition: 0.18s ease;
    margin: 36px auto 0;
    padding: 28px 28px 34px;
    background: radial-gradient(circle at top center, rgba(193, 168, 123, 0.08), transparent 42%), linear-gradient(180deg, #232326 0%, #1b1b1d 100%);
    border: 1px solid rgba(193, 168, 123, 0.18);
    border-radius: 10px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.38);
    color: var(--hac-text);
    font-family: var(--hac-font-body);
}

/* =========================================================
   EMERGENCY DROPDOWN REPAIR — Fine Art Print
   Forces APC-style dropdown mechanics locally
   ========================================================= */

.hac-print-configurator .hac-dropdown {
    position: relative !important;
}

.hac-print-configurator .hac-dropdown__trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

.hac-print-configurator .hac-dropdown__list {
    position: absolute !important;
    top: calc(100% + 0.35rem) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10000 !important;
    display: none !important;
    margin: 0 !important;
    padding: 0.35rem 0 !important;
    list-style: none !important;

    max-height: 20rem !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;

    background: var(--hac-bg-raised) !important;
    border: 1px solid var(--hac-border-strong) !important;
    border-radius: var(--hac-radius) !important;
    box-shadow: var(--hac-shadow) !important;
}

.hac-print-configurator .hac-dropdown__option,
.hac-print-configurator .hac-dropdown__header {
    white-space: normal !important;
}

.hac-print-configurator .hac-dropdown--open .hac-dropdown__list {
    display: block !important;
}

.hac-print-configurator .hac-dropdown__list > li,
.hac-print-configurator .hac-dropdown__option,
.hac-print-configurator .hac-dropdown__header {
    list-style: none !important;
}

.hac-print-configurator .hac-dropdown__option {
    display: block !important;
    padding: 0.55rem 0.85rem !important;
    cursor: pointer !important;
}

.hac-print-configurator .hac-dropdown {
    isolation: isolate;
}