/*
 * HAC Configurator Styles
 * Matches the Hawkes Adventures / Kadence theme visual language.
 *
 * Palette reference (from Kadence global variables):
 *   --global-palette1: #7a1f1f   deep crimson
 *   --global-palette2: #8d6e41   warm brown/gold
 *   --global-palette3: #1c1c1e   near-black
 *   --global-palette4: #4f4f52   mid grey
 *   --global-palette5: #8a7454   warm tan (primary button bg)
 *   --global-palette6: #c1a87b   light gold
 *   --global-palette7: #f5e9c9   parchment (primary button text / light bg)
 *   --global-palette8: #e9dbb8   slightly deeper parchment
 *   --global-palette9: #ffffff   white
 *   --global-palette10: #d87234  orange accent
 *
 * Fonts:
 *   Headings: Cinzel, serif
 *   Body:     'EB Garamond', serif
 */

/* ============================================================================
   Global CSS variable fallbacks — mirrors .hac-configurator values so that
   elements appended to document.body (slideshow, modals) resolve correctly.
   ============================================================================ */

:root {
    --hac-bg:            #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:          #f5e9c9;
    --hac-text-muted:    #c1a87b;
    --hac-text-subtle:   #8a7454;

    --hac-gold:          #c1a87b;
    --hac-gold-deep:     #8a7454;
    --hac-gold-light:    #e9dbb8;
    --hac-crimson:       #7a1f1f;
    --hac-orange:        #d87234;

    --hac-font-heading:  'Cinzel', serif;
    --hac-font-body:     'EB Garamond', serif;

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

/* ============================================================================
   HAC-scoped custom properties
   ============================================================================ */

.hac-configurator {
    --hac-bg:            var(--global-palette3, #1c1c1e);
    --hac-bg-raised:     #26262a;
    --hac-bg-card:       #2e2d2b;
    --hac-border:        rgba(193, 168, 123, 0.2);   /* palette6 at low opacity */
    --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, #8a7454);

    --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-orange:        var(--global-palette10, #d87234);

    --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-shadow-card:   0 4px 20px rgba(0, 0, 0, 0.55);

    --hac-transition:    0.18s ease;

    font-family: var(--hac-font-body);
    color:       var(--hac-text);
    background:  #1c1c1e;
    padding:     2rem 1.5rem 4rem;
    min-height:  100vh;
}

/* ============================================================================
   Loading / error states
   ============================================================================ */

.hac-loading,
.hac-load-error {
    display:     flex;
    align-items: center;
    justify-content: center;
    min-height:  40vh;
    font-family: var(--global-body-font-family, 'EB Garamond', serif);
    font-size:   1.2rem;
    color:       var(--global-palette6, #c1a87b);
}

.hac-load-error {
    color: var(--global-palette1, #7a1f1f);
}

/* ============================================================================
   Layout — two-column desktop
   ============================================================================ */

.hac-layout {
    display:               grid;
    grid-template-columns: 320px 1fr;
    gap:                   2rem;
    align-items:           start;
    max-width:             var(--global-content-width, 1290px);
    margin:                0 auto;
}

.hac-col--left {
    position: sticky;
    top:      2rem;
}

/* ============================================================================
   Section titles
   ============================================================================ */

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

/* ============================================================================
   Pack configuration
   ============================================================================ */

.hac-pack-config {
    background:    var(--hac-bg-raised);
    border:        1px solid var(--hac-border);
    border-radius: var(--hac-radius-lg);
    padding:       1.5rem;
    margin-bottom: 1.5rem;
}

.hac-config-row {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    gap:            1rem;
    margin-bottom:  1rem;
}

.hac-config-label {
    font-family:    var(--hac-font-heading);
    font-size:      0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--hac-text-muted);
    white-space:    nowrap;
}

.hac-config-value {
    color:       var(--hac-text);
    font-size:   0.95rem;
    font-style:  italic;
}

/* License toggle */

.hac-license-row {
    align-items: flex-start;
    flex-wrap:   wrap;
    gap:         0.5rem;
}

.hac-toggle {
    display:       flex;
    border:        1px solid var(--hac-border-strong);
    border-radius: var(--hac-radius);
    overflow:      hidden;
    flex-shrink:   0;
}

.hac-toggle__btn {
    background:     transparent;
    border:         none;
    color:          var(--hac-text-muted);
    font-family:    var(--hac-font-body);
    font-size:      0.9rem;
    padding:        0.4rem 0.9rem;
    cursor:         pointer;
    transition:     background var(--hac-transition), color var(--hac-transition);
    display:        flex;
    align-items:    center;
    gap:            0.4rem;
    white-space:    nowrap;
}

.hac-toggle__btn:hover {
    background: rgba(193, 168, 123, 0.1);
    color:      var(--hac-text);
}

.hac-toggle__btn--active {
    background: var(--hac-gold-deep);
    color:      var(--hac-gold-light);
}

.hac-toggle__btn--active:hover {
    background: var(--hac-gold);
    color:      #1c1c1e;
}

/* Compact toggle — used inside modals */
.hac-toggle--sm .hac-toggle__btn {
    font-size: 0.8rem;
    padding:   0.25rem 0.65rem;
}

.hac-license-note {
    font-size:   0.85rem;
    color:       var(--hac-text-subtle);
    font-style:  italic;
    line-height: 1.5;
    margin:      0 0 1rem;
}

/* Pack size grid */

.hac-packsize-row {
    flex-direction: column;
    align-items:    flex-start;
}

.hac-packsize-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   0.6rem;
    width:                 100%;
}

.hac-packsize-card {
    background:    var(--hac-bg-card);
    border:        1px solid var(--hac-border);
    border-radius: var(--hac-radius);
    padding:       0.75rem 0.75rem 0.6rem;
    cursor:        pointer;
    text-align:    left;
    transition:    border-color var(--hac-transition), background var(--hac-transition);
    display:       flex;
    flex-direction: column;
    gap:           0.2rem;
    position:      relative;
}

.hac-packsize-card:hover {
    border-color: var(--hac-gold);
    background:   rgba(138, 116, 84, 0.12);
}

.hac-packsize-card--active {
    border-color: var(--hac-gold);
    background:   rgba(138, 116, 84, 0.18);
    box-shadow:   0 0 0 1px var(--hac-gold-deep);
}

.hac-packsize-card__count {
    font-family:    var(--hac-font-heading);
    font-size:      0.8rem;
    letter-spacing: 0.06em;
    color:          var(--hac-text);
}

.hac-packsize-card__price {
    font-size:   1.05rem;
    font-weight: 600;
    color:       var(--hac-gold);
}

.hac-packsize-card__base-label {
    font-size:   0.68rem;
    color:       var(--hac-text-subtle);
    font-style:  italic;
    margin-top:  -0.15rem;
}

.hac-packsize-card__per {
    font-size:  0.75rem;
    color:      var(--hac-text-subtle);
    font-style: italic;
}

.hac-microcopy {
    font-size:   0.82rem;
    color:       var(--hac-text-subtle);
    font-style:  italic;
    margin:      0.75rem 0 0;
    line-height: 1.4;
}

/* ============================================================================
   Badges
   ============================================================================ */

.hac-badge {
    display:        inline-block;
    font-family:    var(--hac-font-heading);
    font-size:      0.65rem;
    letter-spacing: 0.04em;
    padding:        0.15em 0.45em;
    border-radius:  3px;
    white-space:    nowrap;
    line-height:    1.4;
}

.hac-badge--value {
    background: var(--hac-crimson);
    color:      var(--hac-gold-light);
}

.hac-badge--popular {
    background: var(--hac-orange);
    color:      var(--global-palette3, #1c1c1e);
}

.hac-badge--showcase {
    background: rgba(216, 114, 52, 0.85);
    color:      #fff;
    border:     1px solid rgba(216, 114, 52, 0.6);
}

/* Showcase badge — overlaid on card thumbnail (bottom-left) */
.hac-card__showcase-badge {
    position:       absolute;
    bottom:         0.4rem;
    left:           0.4rem;
    background:     rgba(216, 114, 52, 0.88);
    color:          #fff;
    font-family:    var(--hac-font-heading);
    font-size:      0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding:        0.15em 0.5em;
    border-radius:  3px;
    pointer-events: none;
    line-height:    1.5;
    white-space:    nowrap;
    z-index:        3;
}

/* Showcase filter toggle — ghost by default, filled when active */
.hac-showcase-toggle {
    width:      100%;
    justify-content: center;
    margin-top: 0;
}

.hac-showcase-toggle--active {
    background:   rgba(216, 114, 52, 0.15);
    border-color: var(--hac-orange);
    color:        var(--hac-orange);
}

.hac-showcase-toggle--active:hover {
    background:   rgba(216, 114, 52, 0.25);
    border-color: var(--hac-orange);
    color:        var(--hac-orange);
}

/* ============================================================================
   Filters
   ============================================================================ */

.hac-filters {
    background:    var(--hac-bg-raised);
    border:        1px solid var(--hac-border);
    border-radius: var(--hac-radius-lg);
    padding:       1.5rem;
}

.hac-filter-row {
    display:        flex;
    flex-direction: column;
    gap:            0.2rem;
    margin-bottom:  0.75rem;
}

.hac-filter-label {
    font-family:    var(--hac-font-heading);
    font-size:      0.67rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--hac-text-subtle);
    margin-bottom:  0.2rem;
}

.hac-filter-select,
.hac-filter-input {
    background:    var(--hac-bg-card);
    border:        1px solid var(--hac-border-strong);
    border-radius: var(--hac-radius);
    color:         var(--hac-text);
    font-family:   var(--hac-font-body);
    font-size:     0.9rem;
    padding:       0.4rem 0.6rem;
    width:         100%;
    transition:    border-color var(--hac-transition);
}

.hac-filter-input:focus {
    outline:      none;
    border-color: var(--hac-gold);
}

/* Custom dropdown — replaces native <select> for reliable cross-browser styling */

.hac-dropdown {
    position:      relative;
    width:         100%;
    outline:       none;
}

.hac-dropdown__trigger {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    background:      var(--hac-bg-card);
    border:          1px solid var(--hac-border-strong);
    border-radius:   var(--hac-radius);
    color:           var(--hac-text);
    font-family:     var(--hac-font-body);
    font-size:       0.9rem;
    padding:         0.4rem 0.6rem;
    cursor:          pointer;
    user-select:     none;
    transition:      border-color var(--hac-transition);
}

.hac-dropdown--open .hac-dropdown__trigger,
.hac-dropdown:focus .hac-dropdown__trigger {
    border-color: var(--hac-gold);
    outline:      none;
}

.hac-dropdown__chevron {
    color:       var(--hac-text-muted);
    font-size:   0.7rem;
    flex-shrink: 0;
    margin-left: 0.4rem;
    line-height: 1;
}

/* Portal listbox — rendered in document.body, positioned via JS */
.hac-dropdown__list--portal,
.hac-apc-dropdown-portal {
    position:      fixed;   /* set by JS */
    background:    #2e2d2b;
    border:        1px solid #c1a87b;
    border-radius: 4px;
    margin:        0;
    padding:       0.25rem 0;
    list-style:    none;
    box-shadow:    0 4px 16px rgba(0,0,0,0.6);
    max-height:    220px;
    overflow-y:    auto;
    font-family:   'EB Garamond', serif;
    font-size:     0.9rem;
    color:         #c1a87b;
    display:       none;
    z-index:       200002;
}

.hac-dropdown__list--portal.is-open {
    display: block;
}

.hac-dropdown__option {
    padding:     0.45rem 0.75rem;
    font-family: var(--hac-font-body);
    font-size:   0.9rem;
    color:       var(--hac-text-muted);
    cursor:      pointer;
    transition:  background var(--hac-transition), color var(--hac-transition);
}

.hac-dropdown__option--focused {
    background: rgba(193, 168, 123, 0.12);
    color:      var(--hac-text);
}

.hac-dropdown__option--selected {
    color:       var(--hac-gold);
    font-style:  italic;
}

.hac-dropdown__option--selected.hac-dropdown__option--focused {
    background: rgba(193, 168, 123, 0.15);
}

.hac-filter-count {
    font-size:   0.82rem;
    color:       var(--hac-gold);
    font-style:  italic;
    margin:      0.25rem 0 0.75rem;
    text-align:  right;
}

/* ============================================================================
   Collapsible filter sections
   ============================================================================ */

.hac-filter-section {
    border-bottom: 1px solid var(--hac-border);
    margin-bottom: 0.1rem;
}

.hac-filter-section__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
    background:      transparent;
    border:          none;
    color:           var(--hac-gold);
    font-family:     var(--hac-font-heading);
    font-size:       0.72rem;
    letter-spacing:  0.1em;
    text-transform:  uppercase;
    padding:         0.65rem 0 0.5rem;
    cursor:          pointer;
    transition:      color var(--hac-transition);
    text-align:      left;
}

.hac-filter-section__header:hover {
    color: var(--hac-gold-light);
}

.hac-filter-section--open .hac-filter-section__header {
    color: var(--hac-gold-light);
}

.hac-filter-section__chevron {
    font-size:   0.65rem;
    flex-shrink: 0;
    color:       var(--hac-gold-deep);
    transition:  color var(--hac-transition);
}

.hac-filter-section__body {
    padding-bottom: 0.75rem;
}

/* ============================================================================
   Checkbox filter groups (multi-select)
   ============================================================================ */

.hac-checkbox-filter {
    margin-bottom: 0.75rem;
}

.hac-checkbox-filter__label {
    font-family:    var(--hac-font-heading);
    font-size:      0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--hac-text-subtle);
    margin:         0 0 0.4rem;
}

.hac-checkbox-filter__row {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    padding:     0.2rem 0;
    cursor:      pointer;
    font-size:   0.85rem;
    color:       var(--hac-text-muted);
    transition:  color var(--hac-transition);
    line-height: 1.3;
}

.hac-checkbox-filter__row:hover {
    color: var(--hac-text);
}

.hac-checkbox-filter__row input[type="checkbox"] {
    accent-color: var(--hac-gold-deep);
    width:        0.85rem;
    height:       0.85rem;
    flex-shrink:  0;
    cursor:       pointer;
}

.hac-checkbox-filter__text {
    line-height: 1.3;
}

/* ============================================================================
   Filter / Discover drawer
   ============================================================================ */

/* Trigger buttons — sit above the chip bar in the right column */
.hac-drawer-triggers {
    display:    flex;
    gap:        0.6rem;
    margin-bottom: 0.5rem;
}

.hac-drawer-trigger {
    display:        inline-flex;
    align-items:    center;
    gap:            0.4rem;
    background:     #26262a;                             /* --hac-bg-raised hardcoded — modal lives in body */
    border:         1px solid rgba(193, 168, 123, 0.45); /* --hac-border-strong */
    border-radius:  var(--hac-radius);
    color:          var(--hac-text-muted);
    font-family:    var(--hac-font-heading);
    font-size:      0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding:        0.4rem 0.85rem;
    cursor:         pointer;
    transition:     border-color var(--hac-transition), color var(--hac-transition),
                    background var(--hac-transition);
}

.hac-drawer-trigger:hover,
.hac-drawer-trigger--active {
    border-color: var(--hac-gold);
    color:        var(--hac-text);
    background:   rgba(193, 168, 123, 0.08);
}

.hac-drawer-trigger--active {
    color: var(--hac-gold);
}

/* Overlay backdrop — lighter since left column stays visible */
.hac-drawer-overlay {
    position:   fixed;
    inset:      0;
    background: rgba(0, 0, 0, 0.45);
    z-index:    100000;
    animation:  hac-fade-in 0.15s ease;
}

/* Drawer panel — left position set by JS to align with right column */
.hac-drawer {
    position:        fixed;
    top:             0;;
    /* left is set dynamically by JS — falls back to 0 */
    left:            0;
    bottom:          0;
    width:           min(480px, 92vw);
    background:      #26262a;
    border-right:    1px solid rgba(193, 168, 123, 0.45);
    border-left:     1px solid rgba(193, 168, 123, 0.2);
    box-shadow:      4px 0 40px rgba(0, 0, 0, 0.75);
    z-index:         100001;
    display:         flex;
    flex-direction:  column;
    /* overflow visible so dropdown lists can escape the drawer bounds */
    overflow:        visible;
    animation:       hac-slide-right 0.22s ease;
    font-family:     'EB Garamond', serif;
    color:           #f5e9c9;
    isolation:       isolate;
    margin-top:      40px;
    margin-bottom:   40px;
}

/* Header clips its own content but doesn't affect dropdown escape */
.hac-drawer__header {
    overflow: hidden;
}

@keyframes hac-slide-right {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

/* Drawer header — close button + tabs */
.hac-drawer__header {
    display:       flex;
    align-items:   center;
    gap:           0;
    border-bottom: 1px solid rgba(193, 168, 123, 0.2);
    flex-shrink:   0;
    padding:       0 1rem;
    background:    #1c1c1e;
}

.hac-drawer__close {
    background:   transparent;
    border:       none;
    color:        #8a7454;
    font-size:    1rem;
    cursor:       pointer;
    padding:      0.75rem 0.5rem 0.75rem 0;
    line-height:  1;
    transition:   color 0.18s ease;
    flex-shrink:  0;
    margin-right: 0.5rem;
}

.hac-drawer__close:hover {
    color: #f5e9c9;
}

/* Tab strip */
.hac-drawer__tabs {
    display: flex;
    flex:    1;
    gap:     0;
}

.hac-drawer__tab {
    background:     transparent;
    border:         none;
    border-bottom:  2px solid transparent;
    color:          #8a7454;
    font-family:    'Cinzel', serif;
    font-size:      0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding:        0.85rem 1.1rem 0.7rem;
    cursor:         pointer;
    transition:     color 0.18s ease, border-color 0.18s ease;
    white-space:    nowrap;
}

.hac-drawer__tab:hover {
    color: #f5e9c9;
}

.hac-drawer__tab--active {
    color:        #c1a87b;
    border-color: #c1a87b;
}

/* Scrollable tab content */
.hac-drawer__body {
    flex:       1;
    overflow-y: auto;
    padding:    1.25rem 1.25rem 2rem;
    background: #26262a;
    overscroll-behavior: none;
}

.hac-drawer__body::-webkit-scrollbar       { width: 6px; }
.hac-drawer__body::-webkit-scrollbar-track { background: #1c1c1e; }
.hac-drawer__body::-webkit-scrollbar-thumb { background: #8a7454; border-radius: 3px; }

/* ============================================================================
   Discover tab — collection cards
   ============================================================================ */

.hac-discover__grid {
    display:        flex;
    flex-direction: column;
    gap:            0.6rem;
    margin-top:     0.6rem;
}

.hac-discover-card {
    background:    #2e2d2b;
    border:        1px solid rgba(193, 168, 123, 0.2);
    border-radius: 4px;
    padding:       0.85rem 1rem;
    cursor:        pointer;
    transition:    border-color 0.18s ease, background 0.18s ease;
}

.hac-discover-card:hover {
    border-color: #c1a87b;
    background:   rgba(138, 116, 84, 0.12);
}

.hac-discover-card--active {
    border-color: #c1a87b;
    background:   rgba(138, 116, 84, 0.18);
    box-shadow:   0 0 0 1px #8a7454;
}

.hac-discover-card__name {
    font-family:    'Cinzel', serif;
    font-size:      0.85rem;
    letter-spacing: 0.04em;
    color:          #f5e9c9;
    margin-bottom:  0.2rem;
}

.hac-discover-card--active .hac-discover-card__name {
    color: #c1a87b;
}

.hac-discover-card__desc {
    font-size:   0.8rem;
    color:       #8a7454;
    font-style:  italic;
    line-height: 1.45;
    margin:      0;
}

.hac-discover-card__count {
    font-size:      0.7rem;
    font-family:    'Cinzel', serif;
    letter-spacing: 0.04em;
    color:          #8a7454;
    margin-top:     0.4rem;
}

.hac-discover__loading,
.hac-discover__empty {
    font-size:  0.88rem;
    color:      #8a7454;
    font-style: italic;
    text-align: center;
    padding:    2rem 0;
}

/* Drawer loading overlay — covers the drawer body during queries */
.hac-drawer-loading {
    position:        absolute;
    inset:           0;
    background:      rgba(38, 38, 42, 0.85);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             1rem;
    z-index:         200001;
}

.hac-drawer-loading .hac-drawer-spinner__ring {
    width:         3rem;
    height:        3rem;
    border:        3px solid rgba(193, 168, 123, 0.2);
    border-top:    3px solid #c1a87b;
    border-radius: 50%;
    animation:     hac-spin 0.75s linear infinite;
}

.hac-drawer-loading .hac-drawer-spinner__label {
    font-family:    'Cinzel', serif;
    font-size:      0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          #c1a87b;
}

.hac-drawer-spinner {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             1rem;
    padding:         3rem 0;
}

.hac-drawer-spinner__ring {
    width:         2.5rem;
    height:        2.5rem;
    border:        3px solid rgba(193, 168, 123, 0.2);
    border-top:    3px solid #c1a87b;
    border-radius: 50%;
    animation:     hac-spin 0.75s linear infinite;
}

.hac-drawer-spinner__label {
    font-family:    'Cinzel', serif;
    font-size:      0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          #8a7454;
}

/* ============================================================================
   Left column — replace sticky filter panel with just pack config +
   the drawer trigger button row (filters now live in the drawer)
   ============================================================================ */

/* The .hac-filters panel is hidden — drawer takes over */
.hac-filters {
    display: none;
}

.hac-btn {
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    gap:            0.4rem;
    font-family:    var(--hac-font-heading);
    font-size:      0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius:  var(--hac-radius);
    padding:        0.55rem 1.2rem;
    cursor:         pointer;
    border:         2px solid transparent;
    transition:     background var(--hac-transition), color var(--hac-transition), border-color var(--hac-transition);
    text-decoration: none;
}

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

.hac-btn--primary:hover:not(:disabled) {
    background:   var(--hac-gold);
    color:        #1c1c1e;
    border-color: var(--hac-gold);
}

.hac-btn--ghost {
    background:   transparent;
    color:        var(--hac-text-muted);
    border-color: var(--hac-border-strong);
}

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

.hac-btn--lg {
    font-size:   0.9rem;
    padding:     0.75rem 1.75rem;
    width:       100%;
    justify-content: center;
}

.hac-btn--sm {
    font-size: 0.72rem;
    padding:   0.35rem 0.85rem;
    margin-top: 0.5rem;
}

.hac-btn--disabled,
.hac-btn:disabled {
    opacity:        0.45;
    cursor:         not-allowed;
    pointer-events: none;
}

.hac-btn--danger {
    background:   rgba(122, 31, 31, 0.15);
    color:        #e87070;
    border-color: rgba(122, 31, 31, 0.5);
}

.hac-btn--danger:hover:not(:disabled) {
    background:   rgba(122, 31, 31, 0.3);
    color:        #ff9090;
    border-color: var(--hac-crimson);
}

/* Reset Order — small, sits below Review Order in actions column */
.hac-btn--reset {
    opacity:    0.7;
    transition: opacity var(--hac-transition), background var(--hac-transition),
                color var(--hac-transition), border-color var(--hac-transition);
}

.hac-btn--reset:hover {
    opacity: 1;
}

.hac-btn__spinner {
    display:       inline-block;
    width:         0.85em;
    height:        0.85em;
    border:        2px solid rgba(245, 233, 201, 0.35);
    border-top:    2px solid var(--hac-gold-light);
    border-radius: 50%;
    animation:     hac-spin 0.7s linear infinite;
    flex-shrink:   0;
}

/* ============================================================================
   Active filter chip bar
   ============================================================================ */

.hac-chip-bar {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         0.5rem;
    min-height:  2.4rem;
    padding:     0.5rem 0 0.75rem;
}

/* Result count — always present */
.hac-chip-bar__count {
    font-family:    var(--hac-font-heading);
    font-size:      0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--hac-text-muted);
    margin-right:   0.25rem;
    white-space:    nowrap;
}

/* Individual filter chip */
.hac-chip {
    display:       inline-flex;
    align-items:   center;
    gap:           0.35rem;
    background:    var(--hac-gold-deep);
    color:         var(--hac-gold-light);
    border-radius: 999px;
    padding:       0.25em 0.55em 0.25em 0.75em;
    font-family:   var(--hac-font-heading);
    font-size:     0.72rem;
    letter-spacing: 0.04em;
    white-space:   nowrap;
    animation:     hac-fade-in 0.15s ease;
}

.hac-chip__label {
    line-height: 1.3;
}

.hac-chip__remove {
    background:    rgba(0, 0, 0, 0.2);
    border:        none;
    border-radius: 50%;
    color:         var(--hac-gold-light);
    cursor:        pointer;
    font-size:     0.6rem;
    width:         1.2em;
    height:        1.2em;
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    padding:       0;
    line-height:   1;
    transition:    background var(--hac-transition), color var(--hac-transition);
    flex-shrink:   0;
}

.hac-chip__remove:hover {
    background: rgba(0, 0, 0, 0.4);
    color:      #fff;
}

/* Discover chips */
.hac-chip--discover {
    background: rgba(216, 114, 52, 0.18);
    color: var(--hac-orange);
    border: 1px solid rgba(216, 114, 52, 0.35);
}

/* Clear All button */
.hac-chip-bar__clear-all {
    background:    transparent;
    border:        1px solid var(--hac-border-strong);
    border-radius: 999px;
    color:         var(--hac-text-subtle);
    cursor:        pointer;
    font-family:   var(--hac-font-heading);
    font-size:     0.68rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding:       0.25em 0.75em;
    transition:    border-color var(--hac-transition), color var(--hac-transition);
    white-space:   nowrap;
}

.hac-chip-bar__clear-all:hover {
    border-color: var(--hac-gold);
    color:        var(--hac-text);
}

/* ============================================================================
   Image grid
   ============================================================================ */

.hac-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1rem;
    min-height:            300px;
}

.hac-grid__empty {
    grid-column:  1 / -1;
    text-align:   center;
    color:        var(--hac-text-subtle);
    font-style:   italic;
    padding:      3rem 0;
}

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

.hac-card {
    background:    var(--hac-bg-raised);
    border:        1px solid var(--hac-border);
    border-radius: var(--hac-radius-lg);
    overflow:      hidden;
    transition:    border-color var(--hac-transition), box-shadow var(--hac-transition);
    cursor:        default;
}

.hac-card:hover {
    border-color: var(--hac-border-strong);
    box-shadow:   var(--hac-shadow-card);
}

.hac-card--selected {
    border-color: var(--hac-gold);
    box-shadow:   0 0 0 1px var(--hac-gold-deep), var(--hac-shadow-card);
}

/* Thumbnail */

.hac-card__thumb-wrap {
    position:     relative;
    aspect-ratio: 1 / 1;
    overflow:     hidden;
    cursor:       pointer;
    background:   #0f0d08;   /* fallback while images load */
    isolation:    isolate;   /* establishes stacking context so z-index works reliably */
}

/* Blurred background — fills the letterbox/pillarbox area with a
   darkened, desaturated echo of the image itself. Bleeds 10% past
   the container edges (clipped by overflow:hidden) so blur fringing
   never shows as a soft transparent halo at the card edges. */
.hac-card__thumb-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;
    transition:     filter 0.25s ease, transform 0.25s ease;
}

/* Foreground image — contains within the square at natural aspect ratio */
.hac-card__thumb-img {
    position:   absolute;
    inset:      0;
    margin:     auto;
    display:    block;
    z-index:    1;
    transition: transform 0.25s ease;
}

/* Portrait images: fill height, allow side blur */
.hac-card__thumb-img--portrait {
    width:      auto;
    height:     100%;
    max-width:  none;
    max-height: none;
}

/* Landscape images: fill width, allow top/bottom blur */
.hac-card__thumb-img--landscape {
    width:      100%;
    height:     auto;
    max-width:  none;
    max-height: none;
    top:        50%;
    bottom:     auto;
    left:       0;
    right:      0;
    transform:  translateY(-50%);
}

.hac-card__thumb-wrap:hover .hac-card__thumb-img--portrait {
    transform: scale(1.04);
}

.hac-card__thumb-wrap:hover .hac-card__thumb-img--landscape {
    transform: translateY(-50%) scale(1.04);
}

.hac-card__thumb-wrap:hover .hac-card__thumb-bg {
    filter:    blur(14px) brightness(0.6) saturate(0.9);
    transform: scale(1.03);
}

.hac-card__thumb-wrap--missing {
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.hac-card__thumb-wrap--missing::after {
    content:     '◈';
    font-size:   2.5rem;
    color:       var(--hac-border-strong);
}

/* Quick-preview button — visible on card hover */

.hac-card__preview-btn {
    position:        absolute;
    top:             0.45rem;
    left:            0.45rem;
    background:      rgba(28, 28, 30, 0.72);
    border:          1px solid rgba(193, 168, 123, 0.35);
    border-radius:   var(--hac-radius);
    color:           var(--hac-gold-light);
    font-size:       0.85rem;
    width:           1.9rem;
    height:          1.9rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    opacity:         0;
    transform:       scale(0.85);
    transition:      opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
    z-index:         2;
    padding:         0;
    line-height:     1;
}

.hac-card__thumb-wrap:hover .hac-card__preview-btn {
    opacity:   1;
    transform: scale(1);
}

.hac-card__preview-btn:hover {
    background: rgba(138, 116, 84, 0.85);
    border-color: var(--hac-gold);
}

/* Check overlay */

.hac-card__check-overlay {
    position:   absolute;
    inset:      0;
    background: rgba(28, 28, 30, 0.0);
    transition: background var(--hac-transition);
    display:    flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding:    0.5rem;
}

.hac-card--selected .hac-card__check-overlay {
    background: rgba(138, 116, 84, 0.15);
}

.hac-card__check-icon {
    width:           1.6rem;
    height:          1.6rem;
    background:      var(--hac-gold-deep);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       0.9rem;
    color:           var(--hac-gold-light);
    opacity:         0;
    transform:       scale(0.7);
    transition:      opacity var(--hac-transition), transform var(--hac-transition);
    line-height:     1;
}

.hac-card--selected .hac-card__check-icon {
    opacity:   1;
    transform: scale(1);
}

.hac-card__title--has-tip {
    cursor: help;
    position: relative;
}

.hac-card__title--has-tip:hover::after {
    content:       attr(title);
    position:      absolute;
    bottom:        calc(100% + 6px);
    left:          0;
    right:         0;
    background:    var(--hac-bg-raised);
    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.78rem;
    font-style:    italic;
    line-height:   1.5;
    padding:       0.5rem 0.65rem;
    white-space:   normal;
    z-index:       100;
    box-shadow:    0 2px 12px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    text-transform: none;
    letter-spacing: 0;
    overflow:      visible;
    text-overflow: unset;
}

/* Card title */

.hac-card__title {
    font-family:  var(--hac-font-heading);
    font-size:    0.72rem;
    letter-spacing: 0.04em;
    color:        var(--hac-text-muted);
    padding:      0.5rem 0.65rem 0.4rem;
    margin:       0;
    white-space:  nowrap;
    overflow:     hidden;
    text-overflow: ellipsis;
}

/* Size checkboxes */

.hac-card__sizes {
    padding:      0.1rem 0.65rem 0.65rem;
    display:      flex;
    flex-direction: column;
    gap:          0.3rem;
    border-top:   1px solid var(--hac-border);
}

.hac-card__size-row {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
    cursor:      pointer;
    font-size:   0.8rem;
    color:       var(--hac-text-muted);
    padding:     0.15rem 0;
    transition:  color var(--hac-transition);
}

.hac-card__size-row:hover {
    color: var(--hac-text);
}

.hac-card__size-row input[type="checkbox"] {
    accent-color: var(--hac-gold-deep);
    width:        0.9rem;
    height:       0.9rem;
    flex-shrink:  0;
    cursor:       pointer;
}

/* Size label layout — name + adder chip side by side */
.hac-card__size-label {
    display:     inline-flex;
    align-items: baseline;
    gap:         0.3rem;
}

.hac-card__size-name {
    color: var(--hac-text-muted);
}

.hac-card__size-adder {
    font-size:      0.72rem;
    font-style:     normal;
    letter-spacing: 0.02em;
    white-space:    nowrap;
}

.hac-card__size-adder--paid {
    color:       var(--hac-orange);
    font-weight: 700;
}

.hac-card__size-adder--free {
    color:       var(--hac-text-subtle);
    font-weight: 400;
    font-style:  italic;
}

.hac-card__size-warning {
    font-size:  0.75rem;
    color:      var(--hac-crimson);
    font-style: italic;
    margin:     0;
    padding:    0 0.65rem 0.5rem;
}

/* ============================================================================
   Pagination
   ============================================================================ */

.hac-pagination {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             1rem;
    margin-top:      1.5rem;
    padding-top:     1rem;
    border-top:      1px solid var(--hac-border);
}

.hac-pagination__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-heading);
    font-size:     0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding:       0.4rem 0.85rem;
    cursor:        pointer;
    transition:    border-color var(--hac-transition), color var(--hac-transition), background var(--hac-transition);
}

.hac-pagination__btn:hover:not(:disabled) {
    border-color: var(--hac-gold);
    color:        var(--hac-text);
    background:   rgba(193, 168, 123, 0.08);
}

.hac-pagination__btn:disabled {
    opacity: 0.3;
    cursor:  not-allowed;
}

.hac-pagination__info {
    font-size:  0.82rem;
    color:      var(--hac-text-subtle);
    font-style: italic;
}

/* ============================================================================
   Summary panel
   ============================================================================ */

.hac-summary {
    background:    var(--hac-bg-raised);
    border:        1px solid var(--hac-border);
    border-radius: var(--hac-radius-lg) var(--hac-radius-lg) 0 0;
    margin-top:    1.5rem;
    box-shadow:    0 -4px 24px rgba(0, 0, 0, 0.5);
    display:       flex;
    flex-wrap:     wrap;
    gap:           1rem 2rem;
    align-items:   center;
    padding:       1.25rem 1.5rem;
    position:      sticky;
    bottom:        0;
}

/* Progress */

.hac-summary__progress {
    display:        flex;
    flex-direction: column;
    gap:            0.4rem;
    flex:           1 1 260px;
    min-width:      200px;
}

.hac-summary__count {
    font-family:    var(--hac-font-heading);
    font-size:      0.8rem;
    letter-spacing: 0.06em;
    color:          var(--hac-text-muted);
    text-transform: uppercase;
}

.hac-summary__bar {
    height:        4px;
    background:    rgba(193, 168, 123, 0.15);
    border-radius: 2px;
    overflow:      hidden;
}

.hac-summary__bar-fill {
    height:        100%;
    background:    var(--hac-gold-deep);
    border-radius: 2px;
    transition:    width 0.3s ease;
}

/* Pricing rows */

.hac-summary__pricing {
    display:        flex;
    flex-direction: column;
    gap:            0.3rem;
    flex:           1 1 260px;
    min-width:      200px;
}

.hac-summary__row {
    display:         flex;
    justify-content: space-between;
    gap:             1.5rem;
    font-size:       0.9rem;
    color:           var(--hac-text-muted);
}

.hac-summary__row--total {
    color:       var(--hac-gold);
    font-size:   1.05rem;
    font-weight: 600;
    border-top:  1px solid var(--hac-border);
    padding-top: 0.3rem;
    margin-top:  0.2rem;
}

.hac-summary__row--sub {
    font-size:  0.8rem;
    color:      var(--hac-text-subtle);
    font-style: italic;
}

.hac-summary__row-label {
    white-space: nowrap;
}

.hac-summary__row-value {
    font-family: var(--hac-font-heading);
    white-space: nowrap;
}

/* Hints */

.hac-summary__hint {
    font-size:  0.82rem;
    color:      var(--hac-text-subtle);
    font-style: italic;
    margin:     0;
    flex:       1 1 100%;
    text-align: center;
}

.hac-summary__hint--warn {
    color: var(--hac-orange);
}

/* Action buttons — row when space allows, wraps when it doesn't */
.hac-summary__actions {
    display:    flex;
    flex-wrap:  wrap;
    gap:        0.5rem;
    flex:       1 1 auto;
    min-width:  200px;
}

.hac-summary__actions .hac-btn {
    flex: 1 1 140px;
}

/* ============================================================================
   Transient notice (top of configurator)
   ============================================================================ */

.hac-notice {
    background:    rgba(216, 114, 52, 0.15);
    border:        1px solid rgba(216, 114, 52, 0.4);
    border-radius: var(--hac-radius);
    color:         var(--hac-orange);
    font-size:     0.9rem;
    padding:       0.7rem 1rem;
    margin-bottom: 1rem;
    max-width:     var(--global-content-width, 1290px);
    margin-left:   auto;
    margin-right:  auto;
    animation:     hac-fade-in 0.2s ease;
}

/* ============================================================================
   Modals
   ============================================================================ */

.hac-modals {
    position: relative;
    z-index:  9999;
}

.hac-modal-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0, 0, 0, 0.7);
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         999990;   /* must exceed slideshow maximized z-index (99990) */
    animation:       hac-fade-in 0.15s ease;
}

.hac-modal {
    background:     #26262a;                             /* --hac-bg-raised hardcoded — modal lives in body */
    border:         1px solid rgba(193, 168, 123, 0.45); /* --hac-border-strong */
    border-radius:  8px;
    padding:        2rem;
    max-width:      420px;
    width:          90%;
    box-shadow:     0 4px 20px rgba(0, 0, 0, 0.55);   /* --hac-shadow-card */
    animation:      hac-slide-up 0.2s ease;
    /* Prevent modal from bleeding off screen edges */
    max-height:     90vh;
    display:        flex;
    flex-direction: column;
    overflow:       hidden;   /* children handle their own scroll */
}

/* Wide variant — used for the Order Summary / Confirm modal */
.hac-modal--wide {
    max-width: 680px;
}

/* ============================================================================
   Image preview modal
   ============================================================================ */

/* Preview variant — wider, no default padding (inner layout handles spacing) */
.hac-modal--preview {
    max-width: 1080px;
    width:     96%;
    padding:   0;
    position:  relative;
    overflow:  hidden;
}

/* Close button — top-right corner */
.hac-preview__close {
    position:        absolute;
    top:             0.65rem;
    right:           0.65rem;
    background:      rgba(28, 28, 30, 0.8);
    border:          1px solid rgba(193, 168, 123, 0.3);
    border-radius:   50%;
    color:           #c1a87b;
    font-size:       0.8rem;
    width:           2rem;
    height:          2rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    z-index:         10;
    transition:      background 0.18s ease, color 0.18s ease;
    padding:         0;
    line-height:     1;
}

.hac-preview__close:hover {
    background: #8a7454;
    color:      #e9dbb8;
    border-color: #c1a87b;
}

/* Two-column layout inside the preview modal — image gets more room */
.hac-preview__inner {
    display:               grid;
    grid-template-columns: 55fr 45fr;
    min-height:            480px;
}

/* Selected state — gold inset border on the image panel */
.hac-preview__img-wrap--selected {
    box-shadow: inset 0 0 0 3px #8a7454;
}

/* Check badge — top-right of preview image, mirrors grid card check icon */
.hac-preview__check {
    position:        absolute;
    top:             0.65rem;
    right:           0.65rem;
    width:           2rem;
    height:          2rem;
    background:      rgba(28, 28, 30, 0.5);
    border:          2px solid rgba(193, 168, 123, 0.3);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1rem;
    color:           transparent;
    z-index:         2;
    transition:      background 0.18s ease, border-color 0.18s ease,
                     color 0.18s ease;
    pointer-events:  none;
}

.hac-preview__check--selected {
    background:   #8a7454;
    border-color: #c1a87b;
    color:        #e9dbb8;
}

/* Left: image */
.hac-preview__img-wrap {
    position:   relative;
    overflow:   hidden;
    background: #0f0d08;
    isolation:  isolate;
    height:     640px;
    min-height: 480px;
    cursor:     pointer;
}

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

.hac-preview__img-fg {
    position:   absolute;
    inset:      0;
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: contain;
    z-index:    1;
}

/* Right: details */
.hac-preview__details {
    padding:        1.75rem 1.75rem 1.5rem;
    display:        flex;
    flex-direction: column;
    gap:            1rem;
    overflow-y:     auto;
    max-height:     580px;
}

.hac-preview__title {
    font-family:    'Cinzel', serif;
    font-size:      1rem;
    letter-spacing: 0.06em;
    color:          #c1a87b;
    margin:         0;
    line-height:    1.4;
}

/* Metadata tag pills */
.hac-preview__meta {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.35rem;
}

.hac-preview__meta-tag {
    background:     rgba(193, 168, 123, 0.12);
    border:         1px solid rgba(193, 168, 123, 0.2);
    border-radius:  999px;
    color:          #c1a87b;
    font-family:    'Cinzel', serif;
    font-size:      0.68rem;
    letter-spacing: 0.05em;
    padding:        0.2em 0.65em;
    white-space:    nowrap;
}

.hac-preview__description {
    color:       #c1a87b;
    font-size:   0.9rem;
    line-height: 1.65;
    font-style:  italic;
    margin:      0;
}

/* Keywords */
.hac-preview__keywords {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.3rem;
}

.hac-preview__keyword {
    background:  rgba(138, 116, 84, 0.1);
    border:      1px solid rgba(193, 168, 123, 0.2);
    color:       #8a7454;
    font-size:   0.72rem;
    font-style:  italic;
    padding:     0.15em 0.55em;
    border-radius: 4px;
}

/* Fine Art Print link in preview modal */
.hac-preview__meta-tag--print-link {
    text-decoration: none;
    cursor: pointer;
}

.hac-preview__meta-tag--print-link:hover,
.hac-preview__meta-tag--print-link:focus {
    text-decoration: none;
    transform: translateY(-1px);
}

.hac-preview__print-link {
    display:      block;
    margin-top:   1rem;
    padding-top:  0.75rem;
    border-top:   1px solid rgba(193, 168, 123, 0.2);
    color:        #c1a87b;
    font-size:    0.85rem;
    font-family:  'Cinzel', serif;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition:   color 0.18s ease;
}

.hac-preview__print-link:hover {
    color: #e9dbb8;
}

/* Flag link — subdued, sits below print link, visually secondary */
.hac-preview__flag-link {
    display:         block;
    margin-top:      0.6rem;
    color:           #8a7454;
    font-size:       0.8rem;
    font-family:     'EB Garamond', serif;
    font-style:      italic;
    text-decoration: none;
    transition:      color 0.18s ease;
    opacity:         0.75;
}

.hac-preview__flag-link:hover {
    color:   #d87234;
    opacity: 1;
}

/* ============================================================================
   Preview modal — rich metadata block
   ============================================================================ */

/* Key/value rows: Scene, Subject, Environment, Camera, Lighting, Time */
.hac-preview__rich-meta {
    display:        flex;
    flex-direction: column;
    gap:            0.3rem;
    padding:        0.6rem 0.75rem;
    background:     rgba(193, 168, 123, 0.06);
    border:         1px solid rgba(193, 168, 123, 0.2);
    border-radius:  4px;
}

.hac-preview__rich-meta-row {
    display:     flex;
    align-items: baseline;
    gap:         0.5rem;
    font-size:   0.82rem;
    line-height: 1.4;
}

.hac-preview__rich-meta-label {
    font-family:    'Cinzel', serif;
    font-size:      0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          #8a7454;
    white-space:    nowrap;
    min-width:      5.5rem;
    flex-shrink:    0;
}

.hac-preview__rich-meta-value {
    color:          #c1a87b;
    font-style:     italic;
    text-transform: capitalize;
}

/* Tag groups — Mood, Historical Elements */
.hac-preview__tags-wrap {
    display:     flex;
    flex-wrap:   wrap;
    align-items: baseline;
    gap:         0.35rem;
    row-gap:     0.4rem;
}

.hac-preview__tags-label {
    font-family:    'Cinzel', serif;
    font-size:      0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          #8a7454;
    white-space:    nowrap;
    flex-shrink:    0;
}

.hac-preview__tag {
    border-radius:  999px;
    font-family:    'Cinzel', serif;
    font-size:      0.65rem;
    letter-spacing: 0.04em;
    padding:        0.2em 0.65em;
    white-space:    nowrap;
    text-transform: capitalize;
}

.hac-preview__tag--mood {
    background: rgba(216, 114, 52, 0.12);
    border:     1px solid rgba(216, 114, 52, 0.3);
    color:      #d87234;
}

.hac-preview__tag--hist {
    background: rgba(193, 168, 123, 0.1);
    border:     1px solid rgba(193, 168, 123, 0.2);
    color:      #c1a87b;
}

/* Print eligible tag — distinct teal tint */
.hac-preview__meta-tag--print {
    background:  rgba(17, 97, 75, 0.2);
    border-color: rgba(17, 97, 75, 0.4);
    color:       #6fcfb0;
}

/* Sizes section inside preview */
.hac-preview__sizes-container {
    display:        flex;
    flex-direction: column;
    gap:            0.4rem;
}

.hac-preview__sizes-label {
    font-family:    'Cinzel', serif;
    font-size:      0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          #c1a87b;
    margin:         0;
}

.hac-preview__sizes {
    display:        flex;
    flex-direction: column;
    gap:            0.2rem;
}

.hac-preview__sizes-hint {
    font-size:  0.78rem;
    color:      #8a7454;
    font-style: italic;
    margin:     0.2rem 0 0;
}

/* Disabled state for size rows when image not yet in pack */
.hac-card__size-row--disabled {
    opacity: 0.45;
    cursor:  default;
    pointer-events: none;
}

/* Action button row */
.hac-preview__actions {
    margin-top:  auto;
    padding-top: 0.5rem;
}

/* Responsive — stack vertically on narrow viewports */
@media ( max-width: 680px ) {
    .hac-preview__inner {
        grid-template-columns: 1fr;
    }

    .hac-preview__img-wrap {
        min-height: 240px;
    }

    .hac-preview__details {
        max-height: none;
    }
}

.hac-modal__title {
    font-family:    'Cinzel', serif;
    font-size:      1rem;
    letter-spacing: 0.06em;
    color:          #c1a87b;
    margin:         0 0 0.75rem;
    flex-shrink:    0;   /* never compress — always visible */
}

.hac-modal__body {
    color:       #c1a87b;
    font-size:   0.95rem;
    line-height: 1.6;
    margin:      0 0 1.5rem;
}

.hac-modal__btns {
    display:         flex;
    gap:             0.75rem;
    justify-content: flex-end;
    flex-shrink:     0;   /* always pinned at bottom, never pushed off screen */
    padding-top:     0.25rem;
}

/* ============================================================================
   Order Review modal body
   ============================================================================ */

.hac-review__body {
    margin-bottom: 1.25rem;
}

/* License / pack size meta rows */
.hac-review__meta-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    padding:         0.35rem 0;
    border-bottom:   1px solid rgba(193, 168, 123, 0.2);
    font-size:       0.88rem;
}

.hac-review__meta-label {
    font-family:    'Cinzel', serif;
    letter-spacing: 0.05em;
    color:          #c1a87b;
    text-transform: uppercase;
    font-size:      0.75rem;
}

.hac-review__meta-value {
    color:      #f5e9c9;
    font-style: italic;
}

/* Image list — scrollable */
.hac-review__list {
    display:    flex;
    flex-direction: column;
    gap:        0;
    max-height: 55vh;
    overflow-y: auto;
    margin-top: 0.75rem;
    border:     1px solid rgba(193, 168, 123, 0.2);
    border-radius: 4px;
}

/* Individual image row */
.hac-review__image {
    display:     flex;
    align-items: flex-start;
    gap:         0.75rem;
    padding:     0.6rem 0.75rem;
    border-bottom: 1px solid rgba(193, 168, 123, 0.2);
    transition:  background 0.18s ease;
}

.hac-review__image:last-child {
    border-bottom: none;
}

.hac-review__image:hover {
    background: rgba(193, 168, 123, 0.04);
}

/* Thumbnail — small square */
.hac-review__thumb {
    width:        52px;
    height:       52px;
    object-fit:   cover;
    border-radius: 4px;
    flex-shrink:  0;
    background:   #2e2d2b;
}

/* Info column */
.hac-review__image-info {
    flex:        1;
    min-width:   0;
}

.hac-review__image-title {
    font-family:   'Cinzel', serif;
    font-size:     0.78rem;
    letter-spacing: 0.03em;
    color:         #f5e9c9;
    margin:        0 0 0.3rem;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

/* Read-only sizes text */
.hac-review__sizes-text {
    font-size:  0.78rem;
    color:      #8a7454;
    margin:     0;
    font-style: italic;
}

.hac-review__sizes-text--warn {
    color:      #7a1f1f;
    font-style: italic;
}

/* Editable sizes inside review — reuse hac-card__size-row styles, override container */
.hac-review__sizes {
    display:        flex;
    flex-wrap:      wrap;
    gap:            0.1rem 1rem;
}

/* Per-image price — right-aligned */
.hac-review__image-price {
    font-family: 'Cinzel', serif;
    font-size:   0.82rem;
    color:       #c1a87b;
    white-space: nowrap;
    padding-top: 0.15rem;
    flex-shrink: 0;
}

/* Remove (deselect) button — small × in top-right of each image row */
.hac-review__remove {
    background:    transparent;
    border:        1px solid transparent;
    border-radius: 4px;
    color:         #8a7454;
    font-size:     0.78rem;
    line-height:   1;
    padding:       0.2rem 0.35rem;
    cursor:        pointer;
    flex-shrink:   0;
    align-self:    flex-start;
    margin-top:    0.1rem;
    transition:    color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.hac-review__remove:hover {
    color:         #7a1f1f;
    border-color:  rgba(122, 31, 31, 0.4);
    background:    rgba(122, 31, 31, 0.08);
}

/* Pack size value when under-count */
.hac-review__meta-value--warn {
    color:       #d87234;
    font-weight: 600;
    font-style:  normal;
}

/* Under-count notice banner */
.hac-review__undercount-notice {
    background:    rgba(216, 114, 52, 0.1);
    border:        1px solid rgba(216, 114, 52, 0.35);
    border-radius: 4px;
    color:         #d87234;
    font-size:     0.85rem;
    font-style:    italic;
    line-height:   1.5;
    padding:       0.5rem 0.75rem;
    margin:        0.6rem 0 0;
}

/* Total row */
.hac-review__total-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         0.65rem 0.75rem 0;
    margin-top:      0.2rem;
    border-top:      1px solid rgba(193, 168, 123, 0.45);
}

.hac-review__total-label {
    font-family:    'Cinzel', serif;
    font-size:      0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          #c1a87b;
}

.hac-review__total-value {
    font-family: 'Cinzel', serif;
    font-size:   1.1rem;
    font-weight: 600;
    color:       #c1a87b;
}

.hac-review__empty {
    color:      #8a7454;
    font-style: italic;
    font-size:  0.9rem;
    text-align: center;
    padding:    1rem 0;
    margin:     0;
}

/* ============================================================================
   Animations
   ============================================================================ */

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

@keyframes hac-slide-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

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

/* ============================================================================
   Skeleton loading cards
   ============================================================================ */

.hac-skeleton {
    background:      linear-gradient(
        90deg,
        #2e2d2b            25%,
        rgba(193, 168, 123, 0.09)     50%,
        #2e2d2b            75%
    );
    background-size: 200% 100%;
    animation:       hac-shimmer 1.6s ease-in-out infinite;
    border-radius:   4px;
}

/* Skeleton card — no interactions */
.hac-card--skeleton {
    pointer-events: none;
    cursor:         default;
}

/* Title bar placeholder — inline-block bar at ~65% width */
.hac-skeleton--title-bar {
    display:          inline-block;
    width:            65%;
    height:           0.72em;
    vertical-align:   middle;
    border-radius:    2px;
}

/* ============================================================================
   Series selector trigger
   ============================================================================ */

.hac-series-row {
    align-items: center;
}

.hac-series-trigger {
    display:       flex;
    align-items:   center;
    gap:           0.4rem;
    background:    #2e2d2b;
    border:        1px solid rgba(193, 168, 123, 0.45);
    border-radius: 4px;
    color:         #f5e9c9;
    font-family:   'EB Garamond', serif;
    font-size:     0.95rem;
    font-style:    italic;
    padding:       0.35rem 0.7rem;
    cursor:        pointer;
    transition:    border-color 0.18s ease, background 0.18s ease;
    text-align:    left;
    max-width:     100%;
}

.hac-series-trigger:hover {
    border-color: #c1a87b;
    background:   rgba(193, 168, 123, 0.08);
}

.hac-series-trigger__name {
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.hac-series-trigger__icon {
    color:      #c1a87b;
    font-style: normal;
    font-size:  0.75rem;
    flex-shrink: 0;
}

/* ============================================================================
   Series modal grid
   ============================================================================ */

.hac-series-grid {
    display:        flex;
    flex-direction: column;
    gap:            0.6rem;
    margin:         0.5rem 0 1.25rem;
    max-height:     60vh;
    overflow-y:     auto;
}

.hac-series-card {
    background:    #2e2d2b;
    border:        1px solid rgba(193, 168, 123, 0.2);
    border-radius: 4px;
    padding:       0.75rem 1rem;
    transition:    border-color 0.18s ease, background 0.18s ease;
}

.hac-series-card:not(.hac-series-card--disabled):not(.hac-series-card--active):hover {
    border-color: #c1a87b;
    background:   rgba(138, 116, 84, 0.1);
}

.hac-series-card--active {
    border-color: #c1a87b;
    background:   rgba(138, 116, 84, 0.15);
}

.hac-series-card--disabled {
    opacity: 0.5;
    cursor:  default;
}

.hac-series-card__name {
    display:        block;
    font-family:    'Cinzel', serif;
    font-size:      0.9rem;
    letter-spacing: 0.04em;
    color:          #f5e9c9;
    margin-bottom:  0.3rem;
}

.hac-series-card--active .hac-series-card__name {
    color: #c1a87b;
}

.hac-series-card__meta {
    display:     flex;
    align-items: center;
    gap:         0.6rem;
}

.hac-series-card__setting {
    font-size:  0.78rem;
    color:      #8a7454;
    font-style: italic;
}

.hac-badge--available {
    background: rgba(17, 97, 46, 0.35);
    color:      #6fcf8a;
    border:     1px solid rgba(17, 97, 46, 0.5);
}

.hac-badge--soon {
    background: rgba(138, 116, 84, 0.15);
    color:      #8a7454;
    border:     1px solid rgba(193, 168, 123, 0.2);
}

/* ============================================================================
   Decorative divider (matches site's thin gold rule aesthetic)
   ============================================================================ */

.hac-pack-config::before,
.hac-filters::before {
    content:       '';
    display:       block;
    width:         2.5rem;
    height:        2px;
    background:    #8a7454;
    margin-bottom: 1.25rem;
}

/* ============================================================================
   Scrollbar styling (Webkit — optional cosmetic touch)
   ============================================================================ */

.hac-configurator ::-webkit-scrollbar {
    width: 6px;
}

.hac-configurator ::-webkit-scrollbar-track {
    background: #1c1c1e;
}

.hac-configurator ::-webkit-scrollbar-thumb {
    background:    #8a7454;
    border-radius: 3px;
}

/* ============================================================================
   Responsive — collapse to single column below 900px
   (Full mobile layout deferred to Phase 2 per spec)
   ============================================================================ */

@media ( max-width: 900px ) {

    .hac-layout {
        grid-template-columns: 1fr;
    }

    .hac-col--left {
        position: static;
    }

    .hac-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .hac-packsize-grid {
        grid-template-columns: repeat(4, 1fr);
    }

}

@media ( max-width: 520px ) {

    .hac-grid {
        grid-template-columns: 1fr;
    }

    .hac-packsize-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

/* ============================================================================
   License info — ⓘ button & modal
   ============================================================================ */

/* Outer column: toggle pill stacked above ⓘ icons row */
.hac-license-toggle-wrap {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            0.2rem;
}

/* ⓘ icons row — mirrors the width of the toggle pill */
.hac-license-info-icons {
    display: flex;
    width:   100%;
}

/* Each ⓘ takes equal width to align under its button */
.hac-license-info-icons .hac-license-info-btn {
    flex:        1;
    text-align:  center;
}

/* ⓘ icon button */
.hac-license-info-btn {
    background:  transparent;
    border:      none;
    color:       #8a7454;
    font-size:   0.85rem;
    line-height: 1;
    padding:     0.15rem 0;
    cursor:      pointer;
    transition:  color 0.18s ease;
}

.hac-license-info-btn:hover {
    color: #c1a87b;
}

/* Modal subtitle — "Derivative Works – Substantial Transformation Required" */
.hac-license-modal__subtitle {
    font-family: 'EB Garamond', serif;
    font-size:   0.85rem;
    font-style:  italic;
    color:       #c1a87b;
    margin:      -0.5rem 0 1rem;
    line-height: 1.4;
}

/* Scrollable body container — flex-grow fills space between title and Close button */
.hac-license-modal__body {
    flex:        1 1 auto;
    overflow-y:  auto;
    margin:      0 -0.25rem 1.25rem;
    padding:     0 0.25rem;
    min-height:  0;   /* required for flex children to scroll correctly */
}

/* Section heading — e.g. "Grant of License" */
.hac-license-modal__section-heading {
    font-family:    'Cinzel', serif;
    font-size:      0.78rem;
    font-weight:    600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          #c1a87b;
    margin:         1.1rem 0 0.3rem;
    padding-bottom: 0.25rem;
    border-bottom:  1px solid rgba(193, 168, 123, 0.2);
}

.hac-license-modal__section-heading:first-child {
    margin-top: 0;
}

/* Section body — legal prose */
.hac-license-modal__section-body {
    font-size:   0.9rem;
    color:       #f5e9c9;
    line-height: 1.65;
    margin:      0 0 0.25rem;
}

/* =========================================================
   SHARED DROPDOWN REPAIR
   Restores APC / drawer / print custom dropdown behavior
   ========================================================= */

.hac-dropdown {
    position: relative;
}

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

.hac-dropdown__list {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    z-index: 10000;
    display: none;
    margin: 0;
    padding: 0.35rem 0;
    list-style: none;
    max-height: 20rem;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.hac-dropdown--open .hac-dropdown__list {
    display: block;
}

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

.hac-dropdown__option {
    display: block;
    cursor: pointer;
}

/* =========================================================
   FILTER DRAWER DROPDOWN VISUALS
   Make opened filter lists look like actual dropdown panels
   ========================================================= */

.hac-drawer .hac-dropdown {
    position: relative;
}

.hac-drawer .hac-dropdown__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.7rem 0.9rem;
    background: #26262a;
    border: 1px solid rgba(193, 168, 123, 0.45);
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
}

.hac-drawer .hac-dropdown__value {
    display: block;
}

.hac-drawer .hac-dropdown__list {
    margin-top: 0.35rem;
    padding: 0.35rem 0;
    background: #2e2d2b;
    border: 1px solid rgba(193, 168, 123, 0.45);
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.hac-drawer .hac-dropdown__option,
.hac-drawer .hac-dropdown__header {
    display: block;
    padding: 0.6rem 0.9rem;
}

.hac-drawer .hac-dropdown__option:hover,
.hac-drawer .hac-dropdown__option--focused {
    background: rgba(193, 168, 123, 0.12);
}

.hac-drawer .hac-dropdown__option--selected {
    background: rgba(193, 168, 123, 0.16);
    font-weight: 600;
}

/* =========================================================
   APC-ONLY PORTAL DROPDOWNS
   Does not share option/list classes with Print Configurator
   ========================================================= */

.hac-apc-dropdown-portal {
    position: fixed;
    border: 1px solid rgba(193, 168, 123, 0.45);
    border-radius: 4px;
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    font-family: 'EB Garamond', serif;
    font-size: 0.9rem;
    display: none;
    z-index: 200002;
}

.hac-apc-dropdown-portal.is-open {
    display: block;
}

.hac-apc-dropdown__option {
    display: block;
    padding: 0.6rem 0.9rem;
    font-family: 'EB Garamond', serif;
    font-size: 0.9rem;
    color: #c1a87b;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
    list-style: none;
}

.hac-apc-dropdown__option:hover,
.hac-apc-dropdown__option--focused {
    background: rgba(193, 168, 123, 0.12);
    color: #f5e9c9;
}

.hac-apc-dropdown__option--selected {
    background: rgba(193, 168, 123, 0.16);
    color: #c1a87b;
    font-style: italic;
}

.hac-apc-dropdown__option--selected.hac-apc-dropdown__option--focused {
    background: rgba(193, 168, 123, 0.18);
}

/* =========================================================
   APC-ONLY DROPDOWN SHELL
   ========================================================= */

.hac-apc-dropdown {
    position: relative;
    width: 100%;
    outline: none;
}

.hac-apc-dropdown__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 2rem;
    padding: 0.4rem 0.65rem 0.4rem 0.75rem;
    box-sizing: border-box;
    background: #1a191d;
    border: 1px solid rgba(193, 168, 123, 0.55);
    border-radius: 4px;
    color: #f5e9c9;
    font-family: 'EB Garamond', serif;
    font-size: 0.88rem;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.hac-apc-dropdown__trigger:hover {
    background: #222028;
    border-color: #c1a87b;
}

.hac-apc-dropdown--open .hac-apc-dropdown__trigger,
.hac-apc-dropdown:focus .hac-apc-dropdown__trigger {
    border-color: #c1a87b;
    background: #222028;
    outline: none;
}

.hac-apc-dropdown__value {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hac-apc-dropdown__chevron {
    color: #8a7454;
    font-size: 0.65rem;
    flex-shrink: 0;
    margin-left: 0.5rem;
    line-height: 1;
    transition: color 0.18s ease;
}

.hac-apc-dropdown__trigger:hover .hac-apc-dropdown__chevron,
.hac-apc-dropdown--open .hac-apc-dropdown__chevron {
    color: #c1a87b;
}
/* ============================================================================
   Slideshow overlay
   ============================================================================ */

/**
 * Normal mode: the overlay is a child of .hac-col--right, sitting below the
 * chip bar and covering the grid + pagination area.  The left column (pack
 * config) and the sticky summary panel remain visible and interactive.
 *
 * Maximized mode: the element is moved to <body> and gets
 * .hac-slideshow--maximized, which switches it to a fixed full-viewport layer.
 */

/* ── Grid area wrapper — establishes stacking context for overlay ────────────── */
.hac-grid-area {
    position: relative;
    /* min-height prevents the area from collapsing to zero when slideshow is open
       and the grid/pagination are visually hidden beneath the overlay */
    min-height: 520px;
}

/* ── Normal mode shell ──────────────────────────────────────────────────────── */
/* position:fixed + top/left/width/height are set by JS via positionSlideshow() */
/* so the overlay covers only the VISIBLE portion of the grid area.             */
.hac-slideshow {
    position:        fixed;
    display:         flex;
    flex-direction:  column;
    background:      #0f0d08;
    border:          1px solid rgba(193, 168, 123, 0.45);
    border-radius:   8px;
    overflow:        hidden;
    z-index:         9900;
    animation:       hac-fade-in 0.18s ease;
    isolation:       isolate;
}

/* ── Maximized mode — expand to full viewport WITHOUT moving the DOM node ────── */
/* !important overrides the JS-injected top/left/width/height inline styles.    */
/* top is set to 0 here; JS adjusts for the WP admin bar if present.           */
.hac-slideshow--maximized {
    /* top and height are set by JS (to account for WP admin bar) */
    top:           0;
    left:          0 !important;
    width:         100vw !important;
    height:        100vh;
    z-index:       99990;
    border-radius: 0;
    border:        none;
}

/* Prevent the page from scrolling behind the maximized slideshow overlay */
body.hac-slideshow-open {
    overflow: hidden;
}

/* ── Top bar ────────────────────────────────────────────────────────────────── */
.hac-slideshow__topbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0.5rem 0.75rem;
    background:      rgba(28, 28, 30, 0.92);
    border-bottom:   1px solid rgba(193, 168, 123, 0.15);
    flex-shrink:     0;
    gap:             0.5rem;
    z-index:         2;
}

.hac-slideshow__topbar-right {
    display:     flex;
    align-items: center;
    gap:         0.35rem;
    margin-left: auto;
}

.hac-slideshow__topbar-btn {
    background:      rgba(193, 168, 123, 0.08);
    border:          1px solid rgba(193, 168, 123, 0.35);
    border-radius:   4px;
    color:           #c1a87b;          /* gold — hardcoded, element lives outside .hac-configurator */
    font-size:       0.82rem;
    font-weight:     600;
    min-width:       2rem;
    height:          2rem;
    padding:         0 0.65rem;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    transition:      background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    line-height:     1;
    white-space:     nowrap;
    letter-spacing:  0.02em;
}

.hac-slideshow__topbar-btn:hover {
    background:   rgba(138, 116, 84, 0.3);
    color:        #e9dbb8;
    border-color: #c1a87b;
}

.hac-slideshow__close-btn:hover {
    background:   rgba(122, 31, 31, 0.35);
    color:        #e87070;
    border-color: rgba(200, 60, 60, 0.6);
}

.hac-slideshow__counter {
    font-family:    'Cinzel', serif;   /* hardcoded — element lives outside .hac-configurator */
    font-size:      0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          #8a7454;           /* --hac-text-subtle equivalent */
    white-space:    nowrap;
    /* centered between preview btn and right-side btns */
    flex:           1;
    text-align:     center;
}

/* ── Stage: nav arrows + image frame ────────────────────────────────────────── */
.hac-slideshow__stage {
    position:  relative;
    flex:      1;
    display:   flex;
    align-items: stretch;
    min-height: 0;
}

/* Left / right nav buttons */
.hac-slideshow__nav {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    z-index:         3;
    background:      rgba(28, 28, 30, 0.7);
    border:          1px solid rgba(193, 168, 123, 0.25);
    border-radius:   4px;
    color:           #c1a87b;
    font-size:       1.2rem;
    width:           2.4rem;
    height:          3.5rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    transition:      background 0.18s ease, color 0.18s ease,
                     border-color 0.18s ease, opacity 0.18s ease;
    opacity:         0.55;
    padding:         0;
    line-height:     1;
}

.hac-slideshow__stage:hover .hac-slideshow__nav {
    opacity: 1;
}

.hac-slideshow__nav:hover {
    background:   rgba(138, 116, 84, 0.55);
    color:        #e9dbb8;
    border-color: #c1a87b;
    opacity:      1;
}

.hac-slideshow__nav--prev { left:  0.5rem; }
.hac-slideshow__nav--next { right: 0.5rem; }

/* ── Image frame ────────────────────────────────────────────────────────────── */
.hac-slideshow__frame {
    position:   relative;
    flex:       1;
    overflow:   hidden;
    background: #0f0d08;
    display:    flex;
    align-items: center;
    justify-content: center;
    min-height: 460px;
    isolation:  isolate;
}

/* Blurred background fill — mirrors the card / preview pattern */
.hac-slideshow__img-bg {
    position:       absolute;
    inset:          -10%;
    width:          120%;
    height:         120%;
    object-fit:     cover;
    filter:         blur(18px) brightness(0.45) saturate(0.7);
    pointer-events: none;
    z-index:        0;
}

/* Foreground image — contained, full quality */
.hac-slideshow__img-fg {
    position:    relative;
    z-index:     1;
    max-width:   100%;
    max-height:  100%;
    width:       auto;
    height:      auto;
    object-fit:  contain;
    display:     block;
    /* Subtle entrance animation when image changes */
    animation:   hac-fade-in 0.2s ease;
}

/* ── Title bar overlay (bottom of frame) ────────────────────────────────────── */
.hac-slideshow__title-bar {
    position:        absolute;
    bottom:          0;
    left:            0;
    right:           0;
    z-index:         2;
    display:         flex;
    align-items:     center;
    gap:             0.6rem;
    padding:         0.5rem 3.5rem;   /* side padding clears the nav arrow buttons */
    background:      linear-gradient(transparent, rgba(15, 13, 8, 0.88));
    pointer-events:  none;
}

.hac-slideshow__title {
    font-family:    'Cinzel', serif;
    font-size:      0.82rem;
    letter-spacing: 0.05em;
    color:          #e9dbb8;           /* --hac-gold-light equivalent */
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    flex:           1;
    min-width:      0;
}

.hac-slideshow__selected-badge {
    font-family:    'Cinzel', serif;
    font-size:      0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background:     rgba(138, 116, 84, 0.85);
    color:          #e9dbb8;
    padding:        0.15em 0.55em;
    border-radius:  3px;
    white-space:    nowrap;
    flex-shrink:    0;
}

.hac-slideshow__showcase-badge {
    font-family:    'Cinzel', serif;
    font-size:      0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background:     rgba(216, 114, 52, 0.85);
    color:          #fff;
    padding:        0.15em 0.55em;
    border-radius:  3px;
    white-space:    nowrap;
    flex-shrink:    0;
}

.hac-slideshow__missing {
    color:      #8a7454;
    font-style: italic;
    text-align: center;
    padding:    3rem 0;
}

/* ── Trigger button — slight right-alignment visual treatment ───────────────── */
.hac-slideshow-trigger {
    margin-left: auto;   /* pushes it to the right end of the flex row */
}

/* ── Maximized mode height fix ──────────────────────────────────────────────── */
.hac-slideshow--maximized .hac-slideshow__frame {
    min-height: unset;
}

/* ── Responsive: shrink minimum height on narrow viewports ─────────────────── */
@media ( max-width: 900px ) {
    .hac-grid-area {
        min-height: 340px;
    }

    .hac-slideshow__frame {
        min-height: 280px;
    }
}