/**
 * UKSR Product Single Page — Styles
 *
 * Modernised room/product page: hero with gradient overlay,
 * floating info bar, gallery grid + booking sidebar, key info
 * card, map, social share, and sibling room cards.
 *
 * BEM namespace: .uksr-product__*
 * All values from design tokens (--uksr-* custom properties).
 *
 * @version 1.3.0
 */

/* ================================================================
   1. HERO
   ================================================================ */
.uksr-product__hero {
    position: relative;
    min-height: 420px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
}

.uksr-product__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(41,35,92,0.15) 0%, rgba(41,35,92,0.7) 100%);
    display: flex;
    align-items: flex-end;
}

.uksr-product__hero-inner {
    width: 100%;
    max-width: var(--uksr-container-max);
    margin: 0 auto;
    padding: var(--uksr-space-2xl) var(--uksr-container-padding);
    padding-bottom: 60px;
}

.uksr-product__hero-residence {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.85);
    font-size: var(--uksr-font-size-sm);
    font-weight: var(--uksr-font-weight-medium);
    text-decoration: none;
    margin-bottom: var(--uksr-space-sm);
    transition: color var(--uksr-transition-fast);
}

.uksr-product__hero-residence:hover {
    color: var(--uksr-white);
}

.uksr-product__hero-title {
    color: var(--uksr-white);
    font-size: var(--uksr-font-size-3xl);
    font-weight: var(--uksr-font-weight-bold);
    margin: 0 0 var(--uksr-space-sm);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    line-height: var(--uksr-line-height-tight);
}

.uksr-product__hero-price {
    display: flex;
    align-items: center;
    gap: var(--uksr-space-sm);
}

.uksr-product__hero-price-old {
    color: rgba(255,255,255,0.6);
    font-size: var(--uksr-font-size-lg);
    text-decoration: line-through;
}

.uksr-product__hero-price-current {
    color: var(--uksr-white);
    font-size: var(--uksr-font-size-xl);
    font-weight: var(--uksr-font-weight-bold);
}

/* ================================================================
   2. FLOATING INFO BAR
   ================================================================ */
.uksr-product-infobar-wrap {
    position: relative;
    z-index: 10;
    margin-top: -30px;
    padding: 0 0 var(--uksr-space-md);
}

.uksr-product-infobar {
    background: var(--uksr-white);
    border-radius: var(--uksr-radius-lg);
    box-shadow: var(--uksr-shadow-lg);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.uksr-product-infobar__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.uksr-product-infobar__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--uksr-grey-100);
    color: var(--uksr-dark-blue);
    padding: 6px 14px;
    border-radius: var(--uksr-radius-full);
    font-size: var(--uksr-font-size-sm);
    font-weight: var(--uksr-font-weight-semibold);
    white-space: nowrap;
}

.uksr-product-infobar__pill i {
    font-size: 0.85em;
    opacity: 0.7;
}

.uksr-product-infobar__pill--offer {
    background: var(--uksr-magenta);
    color: var(--uksr-white);
}

.uksr-product-infobar__pill--offer i {
    opacity: 1;
}

.uksr-product-infobar__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* ================================================================
   3. CONTENT LAYOUT — Main column + Booking Sidebar
   ================================================================ */
.uksr-product__content {
    display: flex;
    gap: var(--uksr-space-xl);
    align-items: flex-start;
}

.uksr-product__main {
    flex: 1 1 60%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--uksr-space-lg);
}

/* When no main column exists, center the sidebar at a readable width */
.uksr-product__content > .uksr-product__sidebar:only-child {
    flex: 1 1 100%;
    max-width: 600px;
    margin: 0 auto;
}

/* Sidebar flex sizing — card styles are in section 5 */
.uksr-product__sidebar {
    flex: 0 0 38%;
    max-width: 38%;
}

/* ================================================================
   3b. SECTION TITLES within main column
   ================================================================ */
.uksr-product__section-title {
    font-size: var(--uksr-font-size-lg);
    font-weight: var(--uksr-font-weight-bold);
    color: var(--uksr-dark-blue);
    margin: 0 0 var(--uksr-space-md);
    padding-bottom: var(--uksr-space-sm);
    border-bottom: 2px solid var(--uksr-magenta);
    display: inline-block;
}

/* ================================================================
   4. FEATURED IMAGE + GALLERY GRID
   ================================================================ */

/* Large featured image */
.uksr-product__featured-image {
    border-radius: var(--uksr-radius-xl);
    overflow: hidden;
    line-height: 0;
    box-shadow: var(--uksr-shadow-card);
}

.uksr-product__featured-image a {
    display: block;
    cursor: zoom-in;
}

.uksr-product__featured-img {
    width: 100%;
    height: auto;
    max-height: 460px;
    object-fit: cover;
    display: block;
    transition: transform var(--uksr-transition-slow);
}

.uksr-product__featured-image:hover .uksr-product__featured-img {
    transform: scale(1.02);
}

/* Thumbnail grid */
.uksr-product__gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--uksr-space-sm);
}

.uksr-product__gallery-item {
    display: block;
    overflow: hidden;
    border-radius: var(--uksr-radius-md);
    line-height: 0;
    box-shadow: var(--uksr-shadow-sm);
    transition: transform var(--uksr-transition-fast),
                box-shadow var(--uksr-transition-fast);
}

.uksr-product__gallery-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--uksr-shadow-md);
}

.uksr-product__gallery-img,
.uksr-product__gallery-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
    transition: transform var(--uksr-transition-slow);
}

.uksr-product__gallery-item:hover img {
    transform: scale(1.05);
}

/* ================================================================
   5. BOOKING SIDEBAR — Card Container
   ================================================================ */

/* Card styling on the sidebar itself (not just inner div),
   because WC Bookings renders <form> outside the card div */
.uksr-product__sidebar {
    background: var(--uksr-white);
    border-radius: var(--uksr-radius-xl);
    border: var(--uksr-border-subtle);
    box-shadow: var(--uksr-shadow-card);
    padding: var(--uksr-space-lg);
    position: sticky;
    top: calc(var(--uksr-header-height-scrolled) + var(--uksr-space-md));
    overflow: hidden;
}

/* Gradient accent bar at top */
.uksr-product__sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--uksr-accent-gradient);
    z-index: 1;
}

/* Inner card div — now transparent, sidebar is the visual card */
.uksr-product__sidebar-card {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}

/* Hide duplicate room features (already shown as pills in main column) */
.uksr-product__sidebar .room-single-page-features {
    display: none !important;
}

/* ── Sidebar sub-template styles ── */
.uksr-product__title {
    font-size: var(--uksr-font-size-xl);
    font-weight: var(--uksr-font-weight-bold);
    color: var(--uksr-dark-blue);
    margin: 0 0 var(--uksr-space-xs);
    line-height: var(--uksr-line-height-tight);
}

/* Minimum stay badge */
.uksr-product__sidebar .min-stay {
    display: inline-block;
    background: var(--uksr-grey-100);
    color: var(--uksr-dark-blue);
    padding: 4px 12px;
    border-radius: var(--uksr-radius-full);
    font-size: var(--uksr-font-size-xs);
    font-weight: var(--uksr-font-weight-semibold);
    margin-bottom: var(--uksr-space-md);
}

/* Price block */
.uksr-product__price-block {
    margin-bottom: var(--uksr-space-md);
    padding-bottom: var(--uksr-space-md);
    border-bottom: var(--uksr-border-subtle);
}

.uksr-product__price-label {
    display: block;
    font-size: var(--uksr-font-size-xs);
    color: var(--uksr-grey-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

/* Old + new price sit on the same row */
.uksr-product__price-old {
    font-size: var(--uksr-font-size-base);
    color: var(--uksr-magenta);
    text-decoration: line-through;
    margin-right: var(--uksr-space-xs);
    vertical-align: baseline;
}

.uksr-product__price-amount {
    display: inline;
    font-size: var(--uksr-font-size-2xl);
    font-weight: var(--uksr-font-weight-bold);
    color: var(--uksr-dark-blue);
    line-height: var(--uksr-line-height-tight);
}

.uksr-product__price-period {
    display: inline;
    font-size: var(--uksr-font-size-sm);
    color: var(--uksr-grey-600);
    margin-left: 4px;
}

/* Description */
.uksr-product__description {
    margin-bottom: var(--uksr-space-md);
    font-size: var(--uksr-font-size-sm);
    color: var(--uksr-grey-700);
    line-height: var(--uksr-line-height-relaxed);
}

.uksr-product__description p {
    margin: 0 0 var(--uksr-space-sm);
}

/* Availability dates */
.uksr-product__availability {
    margin-bottom: var(--uksr-space-md);
    padding: var(--uksr-space-sm) var(--uksr-space-md);
    background: var(--uksr-grey-50);
    border-radius: var(--uksr-radius-md);
    font-size: var(--uksr-font-size-sm);
}

.uksr-product__availability p {
    margin: 0 0 var(--uksr-space-xs);
}

.uksr-product__availability .available {
    font-weight: var(--uksr-font-weight-semibold);
    color: var(--uksr-green-dark);
}

/* Override parent theme's legacy wrappers */
.uksr-product__sidebar .single-product-box,
.uksr-product__sidebar .single-left-block {
    margin: 0;
    padding: 0;
    float: none;
    width: 100%;
}

/* Hide parent theme's share buttons inside summary */
.uksr-product__sidebar .button-block,
.uksr-product__sidebar .share-buttons {
    display: none;
}

/* Hide parent theme's legacy price-block */
.uksr-product__sidebar > .price-block {
    display: none;
}

/* ================================================================
   5b. WC BOOKINGS FORM — Modernised
   ================================================================ */
.uksr-product__sidebar .cart {
    margin-top: var(--uksr-space-md);
    padding-top: var(--uksr-space-md);
    border-top: var(--uksr-border-subtle);
}

/* Duration field */
.uksr-product__sidebar .wc_bookings_field_duration {
    margin-bottom: var(--uksr-space-md);
}

.uksr-product__sidebar .wc_bookings_field_duration label {
    display: block;
    font-size: var(--uksr-font-size-sm);
    font-weight: var(--uksr-font-weight-semibold);
    color: var(--uksr-dark-blue);
    margin-bottom: var(--uksr-space-xs);
}

.uksr-product__sidebar .wc_bookings_field_duration input[type="number"] {
    width: 80px;
    padding: 8px 12px;
    border: var(--uksr-border-card);
    border-radius: var(--uksr-radius-md);
    font-size: var(--uksr-font-size-base);
    color: var(--uksr-dark-blue);
    text-align: center;
    -moz-appearance: textfield;
}

.uksr-product__sidebar .wc_bookings_field_duration input[type="number"]:focus {
    outline: none;
    border-color: var(--uksr-magenta);
    box-shadow: 0 0 0 3px rgba(230, 0, 126, 0.1);
}

/* Date picker fieldset */
.uksr-product__sidebar .wc-bookings-date-picker fieldset,
.uksr-product__sidebar .wc-bookings-date-picker {
    border: none;
    padding: 0;
    margin: 0;
}

.uksr-product__sidebar .wc-bookings-date-picker legend,
.uksr-product__sidebar .wc-bookings-date-picker .label {
    font-size: var(--uksr-font-size-sm);
    font-weight: var(--uksr-font-weight-semibold);
    color: var(--uksr-dark-blue);
    margin-bottom: var(--uksr-space-xs);
    padding: 0;
}

/* Calendar container — override jQuery UI defaults */
.uksr-product__sidebar .ui-datepicker {
    background: var(--uksr-white);
    border: var(--uksr-border-card);
    border-radius: var(--uksr-radius-lg);
    padding: var(--uksr-space-sm);
    box-shadow: none;
    width: 100% !important;
    font-family: inherit;
}

/* Calendar header (month/year navigation) */
.uksr-product__sidebar .ui-datepicker-header {
    background: var(--uksr-dark-blue);
    color: var(--uksr-white);
    border: none;
    border-radius: var(--uksr-radius-md);
    padding: 12px 16px;
    margin-bottom: var(--uksr-space-sm);
    position: relative;
    text-align: center;
}

.uksr-product__sidebar .ui-datepicker-title {
    font-size: var(--uksr-font-size-sm);
    font-weight: var(--uksr-font-weight-bold);
    color: var(--uksr-white);
    line-height: 1;
}

/* Prev/Next arrow buttons — override jQuery UI sprite icons */
.uksr-product__sidebar .ui-datepicker-prev,
.uksr-product__sidebar .ui-datepicker-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 32px !important;
    cursor: pointer;
    background: rgba(255,255,255,0.15) !important;
    border: none !important;
    border-radius: var(--uksr-radius-full);
    transition: background var(--uksr-transition-fast);
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.uksr-product__sidebar .ui-datepicker-prev {
    left: 8px !important;
}

.uksr-product__sidebar .ui-datepicker-next {
    right: 8px !important;
}

.uksr-product__sidebar .ui-datepicker-prev:hover,
.uksr-product__sidebar .ui-datepicker-next:hover {
    background: rgba(255,255,255,0.3) !important;
}

/* Disabled prev (can't go earlier than current month) */
.uksr-product__sidebar .ui-datepicker-prev.ui-state-disabled {
    opacity: 0.45;
    cursor: default;
}

/* Hide the jQuery UI sprite icon — replace with Unicode arrow */
.uksr-product__sidebar .ui-datepicker-prev .ui-icon,
.uksr-product__sidebar .ui-datepicker-next .ui-icon {
    background-image: none !important;
    text-indent: 0;
    font-size: 0;
    color: transparent;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Unicode arrows — pixel-perfect centering via flexbox */
.uksr-product__sidebar .ui-datepicker-prev .ui-icon::after {
    content: '\2039';
    font-size: 28px;
    font-weight: bold;
    color: var(--uksr-white);
    line-height: 1;
}

.uksr-product__sidebar .ui-datepicker-next .ui-icon::after {
    content: '\203A';
    font-size: 28px;
    font-weight: bold;
    color: var(--uksr-white);
    line-height: 1;
}

/* Calendar table */
.uksr-product__sidebar .ui-datepicker-calendar {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
}

.uksr-product__sidebar .ui-datepicker-calendar th {
    font-size: 11px;
    font-weight: var(--uksr-font-weight-semibold);
    color: var(--uksr-grey-600);
    text-align: center;
    padding: 6px 0;
    text-transform: uppercase;
}

.uksr-product__sidebar .ui-datepicker-calendar td {
    padding: 0;
    text-align: center;
    background: transparent;
    border: none;
}

.uksr-product__sidebar .ui-datepicker-calendar td a,
.uksr-product__sidebar .ui-datepicker-calendar td span.ui-state-default {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 auto;
    border-radius: var(--uksr-radius-full);
    font-size: 13px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all var(--uksr-transition-fast);
    background: transparent;
}

/* Available/bookable dates (rendered as <a>) */
.uksr-product__sidebar .ui-datepicker-calendar td a.ui-state-default {
    color: var(--uksr-dark-blue);
    font-weight: var(--uksr-font-weight-semibold);
    background: rgba(177, 203, 12, 0.15);
    border-color: rgba(177, 203, 12, 0.3);
}

.uksr-product__sidebar .ui-datepicker-calendar td a.ui-state-default:hover {
    background: var(--uksr-green);
    color: var(--uksr-white);
    border-color: var(--uksr-green);
}

/* Selected/active date */
.uksr-product__sidebar .ui-datepicker-calendar td a.ui-state-active,
.uksr-product__sidebar .ui-datepicker-calendar td a.ui-state-highlight {
    background: var(--uksr-magenta) !important;
    color: var(--uksr-white) !important;
    font-weight: var(--uksr-font-weight-bold);
    border-color: var(--uksr-magenta) !important;
}

/* Unavailable / disabled dates (rendered as <span>) — must be readable */
.uksr-product__sidebar .ui-datepicker-calendar td.ui-datepicker-unselectable span.ui-state-default,
.uksr-product__sidebar .ui-datepicker-calendar td.ui-state-disabled span.ui-state-default {
    color: var(--uksr-grey-700);
    background: transparent;
    border-color: transparent;
    cursor: default;
}

/* Other-month dates (previous/next month spillover) — lighter but still visible */
.uksr-product__sidebar .ui-datepicker-calendar td.ui-datepicker-other-month span.ui-state-default {
    color: var(--uksr-grey-500);
}

/* WC Bookings: not_bookable (weekends etc) */
.uksr-product__sidebar .ui-datepicker-calendar td.not_bookable span.ui-state-default {
    color: var(--uksr-grey-700);
    background: var(--uksr-grey-50);
}

/* WC Bookings: partially booked */
.uksr-product__sidebar .ui-datepicker-calendar td.partial_booked a.ui-state-default {
    background: rgba(230, 0, 126, 0.1);
    border-color: rgba(230, 0, 126, 0.2);
}

/* WC Bookings: fully booked */
.uksr-product__sidebar .ui-datepicker-calendar td.fully_booked a.ui-state-default {
    background: var(--uksr-grey-100);
    color: var(--uksr-grey-400);
    cursor: not-allowed;
    text-decoration: line-through;
    border-color: transparent;
}

/* Calendar legend */
.uksr-product__sidebar .wc-bookings-date-picker-legend,
.uksr-product__sidebar .legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uksr-space-sm);
    margin-top: var(--uksr-space-sm);
    padding-top: var(--uksr-space-sm);
    border-top: var(--uksr-border-subtle);
    font-size: 11px;
    color: var(--uksr-grey-600);
}

/* Override any leftover jQuery UI widget background on calendar elements */
.uksr-product__sidebar .ui-widget-header {
    background: var(--uksr-dark-blue);
    border: none;
}

.uksr-product__sidebar .ui-widget-content {
    border: none;
}

/* Cost display */
.uksr-product__sidebar .wc-bookings-booking-cost {
    margin-top: var(--uksr-space-md);
    padding: var(--uksr-space-sm) var(--uksr-space-md);
    background: var(--uksr-grey-50);
    border-radius: var(--uksr-radius-md);
    font-size: var(--uksr-font-size-sm);
    text-align: center;
}

/* Apply Now / Book button */
.uksr-product__sidebar .single_apply_btn,
.uksr-product__sidebar #lsr_apply_now_btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    padding: 0 24px;
    background: var(--uksr-magenta);
    color: var(--uksr-white) !important;
    border: none;
    border-radius: var(--uksr-radius-md);
    font-size: var(--uksr-font-size-base);
    font-weight: var(--uksr-font-weight-bold);
    line-height: 1 !important;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    margin-top: var(--uksr-space-md);
    transition: background var(--uksr-transition-fast),
                transform var(--uksr-transition-fast);
}

.uksr-product__sidebar .single_apply_btn:hover,
.uksr-product__sidebar #lsr_apply_now_btn:hover {
    background: var(--uksr-dark-blue);
    transform: translateY(-1px);
}

/* Apply button notice text */
.uksr-product__sidebar .apply_button_notice {
    display: block;
    margin-top: var(--uksr-space-sm);
    font-size: var(--uksr-font-size-xs);
    color: var(--uksr-grey-600);
    text-align: center;
    line-height: var(--uksr-line-height-relaxed);
}

/* WC add-to-cart fallback button */
.uksr-product__sidebar .single_add_to_cart_button {
    display: block;
    width: 100%;
    padding: 14px 24px;
    background: var(--uksr-magenta);
    color: var(--uksr-white);
    border: none;
    border-radius: var(--uksr-radius-md);
    font-size: var(--uksr-font-size-base);
    font-weight: var(--uksr-font-weight-bold);
    text-align: center;
    cursor: pointer;
    margin-top: var(--uksr-space-md);
    transition: background var(--uksr-transition-fast);
}

.uksr-product__sidebar .single_add_to_cart_button:hover {
    background: var(--uksr-dark-blue);
}

/* ================================================================
   6. KEY INFO CARD
   ================================================================ */
.uksr-product__key-info {
    background: var(--uksr-white);
    border-radius: var(--uksr-radius-xl);
    border: var(--uksr-border-subtle);
    box-shadow: var(--uksr-shadow-card);
    position: relative;
    overflow: hidden;
    padding: calc(var(--uksr-space-lg) + 3px) var(--uksr-space-xl) var(--uksr-space-lg);
}

.uksr-product__key-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--uksr-accent-gradient);
    z-index: 1;
}

.uksr-product__key-info-content {
    font-size: var(--uksr-font-size-base);
    color: var(--uksr-grey-800);
    line-height: var(--uksr-line-height-relaxed);
}

/* ================================================================
   6b. ROOM FEATURES WRAP
   ================================================================ */
.uksr-product__features-wrap {
    /* Just a container for the title + pills */
}

/* ================================================================
   7. ROOM FEATURES — Facility Pills
   ================================================================ */
.uksr-product__features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uksr-space-sm);
    justify-content: flex-start;
}

.uksr-product__feature-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(230, 0, 126, 0.06);
    color: var(--uksr-dark-blue);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: var(--uksr-font-weight-light);
    border: none;
    box-shadow: none;
    transition: background var(--uksr-transition-fast);
}

.uksr-product__feature-pill:hover {
    background: rgba(230, 0, 126, 0.12);
}

/* ================================================================
   8. MAP
   ================================================================ */
.uksr-product__map {
    border-radius: var(--uksr-radius-xl);
    overflow: hidden;
    box-shadow: var(--uksr-shadow-card);
    border: var(--uksr-border-subtle);
}

.uksr-product__map-canvas {
    width: 100%;
    height: 400px;
}

/* ================================================================
   9. SOCIAL SHARE
   ================================================================ */
.uksr-product__share {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--uksr-space-lg);
}

.uksr-product__share-title {
    font-size: var(--uksr-font-size-base);
    font-weight: var(--uksr-font-weight-semibold);
    color: var(--uksr-dark-blue);
    margin: 0;
}

.uksr-product__share-buttons {
    display: flex;
    gap: var(--uksr-space-sm);
}

.uksr-product__share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--uksr-radius-full);
    text-decoration: none;
    font-size: var(--uksr-font-size-base);
    transition: transform var(--uksr-transition-fast),
                box-shadow var(--uksr-transition-fast);
}

.uksr-product__share-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--uksr-shadow-md);
}

.uksr-product__share-btn--facebook {
    background: #1877f2;
    color: var(--uksr-white);
}

.uksr-product__share-btn--x {
    background: var(--uksr-grey-900);
    color: var(--uksr-white);
}

/* ================================================================
   10. SIBLING ROOMS — uses shared .uksr-room-card from
       residence-single.css (loaded as dependency)
   ================================================================ */
/* No additional room card styles needed — residence-single.css
   provides the full .uksr-room-card BEM component. */

/* ================================================================
   11. OVERRIDE PARENT THEME DEFAULTS
   ================================================================ */

/* Hide the parent's banner holder (LayerSlider hero) */
.uksr-product .banner_holder {
    display: none;
}

/* Reset parent theme's .images wrapper */
.uksr-product .images {
    float: none;
    width: 100%;
    margin: 0;
}

/* Reset parent theme's .summary wrapper */
.uksr-product > .summary.entry-summary {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Hide legacy product elements rendered by parent hooks */
.uksr-product .product_summary_white,
.uksr-product .single_product_map,
.uksr-product .other-product-title,
.uksr-product .room-type-box,
.uksr-product .woocommerce-tabs,
.uksr-product .related.products,
.uksr-product .upsells.products {
    display: none;
}

/* Reset parent WC grid float layout */
.uksr-product .woocommerce-product-gallery,
.uksr-product div.product div.images,
.uksr-product div.product div.summary {
    float: none;
    width: 100%;
}

/* ================================================================
   12. RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
    .uksr-product__sidebar {
        flex: 0 0 42%;
        max-width: 42%;
    }

    .uksr-product__featured-img {
        max-height: 360px;
    }

    .uksr-product__gallery-img,
    .uksr-product__gallery-item img {
        height: 100px;
    }
}

@media (max-width: 768px) {
    /* Hero */
    .uksr-product__hero {
        min-height: 300px;
    }

    .uksr-product__hero-title {
        font-size: var(--uksr-font-size-2xl);
    }

    .uksr-product__hero-inner {
        padding-bottom: 50px;
    }

    /* Info bar */
    .uksr-product-infobar {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 16px;
    }

    .uksr-product-infobar__pills {
        width: 100%;
    }

    .uksr-product-infobar__actions {
        width: 100%;
    }

    .uksr-product-infobar__actions .uksr-btn-magenta {
        width: 100%;
        text-align: center;
    }

    /* Content — stack vertically */
    .uksr-product__content {
        flex-direction: column;
    }

    .uksr-product__main {
        flex: 1 1 100%;
    }

    .uksr-product__sidebar {
        flex: 1 1 100%;
        max-width: 100%;
        position: static;
    }

    /* Gallery grid — 2 columns on mobile */
    .uksr-product__gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .uksr-product__gallery-img,
    .uksr-product__gallery-item img {
        height: 100px;
    }

    .uksr-product__featured-img {
        max-height: 280px;
    }

    /* Key info */
    .uksr-product__key-info {
        padding: calc(var(--uksr-space-md) + 3px) var(--uksr-space-md) var(--uksr-space-md);
    }

    /* Map */
    .uksr-product__map-canvas {
        height: 280px;
    }

    /* Social share */
    .uksr-product__share {
        flex-direction: column;
        gap: var(--uksr-space-sm);
    }
}

@media (max-width: 480px) {
    .uksr-product__hero {
        min-height: 240px;
    }

    .uksr-product__hero-title {
        font-size: var(--uksr-font-size-xl);
    }

    .uksr-product__gallery-grid {
        grid-template-columns: 1fr 1fr;
    }

    .uksr-product__gallery-img,
    .uksr-product__gallery-item img {
        height: 80px;
    }

    .uksr-product__featured-img {
        max-height: 220px;
    }
}