/* =========================================================
   WEST GATE UNIT LIST CUSTOMIZATIONS
   ========================================================= */

/* Hide the unit-list title */
.unit-size-static-title {
  display: none !important;
}

/* Reduce the space above the unit dimensions */
p.otr-unit-size {
  margin-top: 1px !important;
}

/* Hide filters, headings and sorting controls */
otr-unit-filter-panel,
.filter-panel-container,
.otr-unit-list-filters-panel,
.otr-unit-list-header,
.list-title,
.sort-control-container {
  display: none !important;
}

/* Let the unit-list content use the full available width */
.standard-layout .otr-unit-list-main {
  display: block !important;
  width: 100% !important;
}

.standard-layout .otr-unit-list-content-panel {
  width: 100% !important;
  max-width: none !important;
}

/* Two unit cards per row on large screens */
.unit-cards-grid,
.standard-layout .unit-cards-grid,
.simple-layout .unit-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: none !important;
  align-items: stretch !important;
}

/* Make every card fill its grid cell */
.unit-cards-grid > otr-unit-card,
.standard-layout .unit-cards-grid > otr-unit-card,
.simple-layout .unit-cards-grid > otr-unit-card,
otr-unit-card {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}

/* Card appearance */
.otr-unit-card {
  height: 100% !important;
  border: 1px solid #d9dee3 !important;
  border-radius: 16px !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.1) !important;
}

/* Main card layout */
.otr-unit-content {
  grid-template-columns:
    105px
    minmax(150px, 0.9fr)
    1px
    minmax(190px, 1.25fr) !important;
  grid-template-rows: minmax(330px, auto) !important;
  gap: 16px !important;
  padding-right: 20px !important;
}

/* Image section */
.otr-unit-image-section {
  display: flex !important;
  background-color: #faf7f4 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px 12px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.otr-unit-image-section img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 75px !important;
  max-height: 90px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Unit information */
.otr-unit-details-section {
  padding-top: 28px !important;
  padding-bottom: 24px !important;
}

.otr-unit-size {
  margin-bottom: 16px !important;
  font-size: 1.2rem !important;
  line-height: 1.3 !important;
}

.otr-unit-sqft {
  margin-bottom: 24px !important;
}

/* Price */
.otr-unit-price {
  margin-top: auto !important;
  margin-bottom: 0 !important;
}

.otr-unit-price-amount {
  font-size: 2.15rem !important;
  line-height: 1 !important;
}

/* Description and features */
.otr-unit-fits-section {
  gap: 8px !important;
  padding-top: 28px !important;
  padding-bottom: 24px !important;
}

.fits-title {
  font-size: 1.25rem !important;
  line-height: 1.25 !important;
}

.fits-description {
  min-height: 66px !important;
  margin-bottom: 12px !important;
}

.otr-unit-features-list {
  min-height: 120px !important;
  margin-bottom: 16px !important;
}

.otr-unit-features-list li {
  margin-bottom: 7px !important;
  line-height: 1.3 !important;
}

/* Button alignment */
.otr-unit-actions {
  margin-top: auto !important;
  padding-top: 0 !important;
}

.otr-unit-cta {
  min-width: 145px !important;
}

/* Parking/RV cards first, storage cards second */
otr-unit-card[data-unit-type="parking"] {
  order: 1;
}

otr-unit-card[data-unit-type="storage"] {
  order: 2;
}

/* =========================================================
   RESPONSIVE LAYOUT
   ========================================================= */

/* One card per row from 551px to 1043px.
   Keep the same card design used on large screens. */
@media (max-width: 1043px) and (min-width: 551px) {
  .unit-cards-grid,
  .standard-layout .unit-cards-grid,
  .simple-layout .unit-cards-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 880px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .unit-cards-grid > otr-unit-card,
  .standard-layout .unit-cards-grid > otr-unit-card,
  .simple-layout .unit-cards-grid > otr-unit-card {
    width: 100% !important;
    max-width: 880px !important;
    min-width: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }

  .otr-unit-card {
    height: 100% !important;
  }

  .otr-unit-content {
    display: grid !important;
    grid-template-columns:
      105px
      minmax(150px, 0.9fr)
      1px
      minmax(190px, 1.25fr) !important;
    grid-template-rows: minmax(350px, auto) !important;
    gap: 16px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 0 20px 0 0 !important;
    box-sizing: border-box !important;
  }

  .otr-unit-image-section {
    display: flex !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 105px !important;
    min-width: 105px !important;
    height: 100% !important;
    min-height: 350px !important;
    padding: 18px 12px !important;
    background-color: #faf7f4 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .otr-unit-image-section img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 75px !important;
    max-height: 90px !important;
    padding: 0 !important;
    margin: 0 !important;
    object-fit: contain !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .otr-unit-details-section {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    width: auto !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 30px 0 28px !important;
  }

  .otr-unit-content > .otr-vertical-divider-column {
    display: block !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 1px !important;
    height: calc(100% - 2em) !important;
    align-self: center !important;
  }

  .otr-unit-fits-section {
    display: flex !important;
    grid-column: 4 !important;
    grid-row: 1 !important;
    flex-direction: column !important;
    min-width: 0 !important;
    width: auto !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 30px 12px 18px 0 !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  .fits-title,
  .fits-description,
  .otr-unit-features-list,
  .otr-unit-features-list li {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .fits-description,
  .otr-unit-features-list {
    min-height: 0 !important;
  }

  .otr-unit-price {
    margin-top: auto !important;
    margin-bottom: 0 !important;
  }

  .otr-unit-actions {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    padding-top: 16px !important;
    padding-bottom: 0 !important;
  }

  .otr-unit-actions .otr-unit-cta {
    width: auto !important;
    min-width: 145px !important;
    margin-bottom: 0 !important;
  }
}

/* Stack the inside of each card at 550px and below */
/* Mobile: natural content height and no image background */
@media (max-width: 550px) {
  .unit-cards-grid,
  .standard-layout .unit-cards-grid,
  .simple-layout .unit-cards-grid {
    grid-template-columns: 1fr !important;
  }

  otr-unit-card,
  .otr-unit-card {
    height: auto !important;
    min-height: 0 !important;
  }

  .otr-unit-content {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  .otr-unit-image-section {
    display: flex !important;
    grid-column: 1 !important;
    grid-row: auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 22px !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  .otr-unit-image-section img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 90px !important;
    max-height: 100px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  .otr-unit-details-section,
  .otr-unit-fits-section {
    display: flex !important;
    grid-column: 1 !important;
    grid-row: auto !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 22px !important;
  }

  .otr-unit-price {
    margin-top: 20px !important;
    margin-bottom: 0 !important;
  }

  .fits-description,
  .otr-unit-features-list {
    min-height: 0 !important;
    height: auto !important;
  }

  .otr-vertical-divider-column {
    display: none !important;
  }

  .otr-unit-actions {
    width: 100% !important;
    margin-top: 18px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }

  .otr-unit-cta {
    width: 100% !important;
    min-width: 0 !important;
  }
	
/* Remove excess spacing between size, square footage and price */
.otr-unit-details-section {
  justify-content: flex-start !important;
  gap: 0 !important;
}

.otr-unit-size {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

.otr-unit-sqft {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

.otr-unit-price {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}	
}
/* Reduce right padding in the one-card layout above 770px */
@media (min-width: 770px) and (max-width: 1043px) {
  .otr-unit-fits-section {
    padding-right: 12px !important;
  }
}
/*
 * OTR CSS Theme
 * Based on the existing Voltage theme.
 * Selector changed from data-theme="voltage"
 * to data-theme="otr-css".
 */

[data-theme="otr-css"] {
  --otr-color-primary:#2a2a2a;
  --otr-color-primary-hover:#e6d122;
  --otr-color-primary-active:#ccbb1e;
  --otr-color-primary-text:#000;
  --otr-color-secondary:#2a2a2a;
  --otr-color-secondary-hover:#3d3d3d;
  --otr-color-secondary-active:#1f1f1f;
  --otr-color-secondary-text:#ffe827;
  --otr-color-accent:#ffe827;
  --otr-color-accent-hover:#e6d122;
  --otr-color-accent-active:#ccbb1e;
  --otr-color-accent-text:#000;
  --otr-color-background-primary:#fff;
  --otr-color-background-secondary:#f8f8f8;
  --otr-color-background-tertiary:#e3e3e3;
  --otr-color-background-disabled:#e0e0e0;
  --otr-color-background-overlay:rgba(0,0,0,.6);
  --otr-color-text-primary:#252205;
  --otr-color-text-secondary:#3a3a3a;
  --otr-color-text-disabled:#999;
  --otr-color-text-link:#ffe827;
  --otr-color-text-link-hover:#e6d122;
  --otr-color-text-error:#e53e3e;
  --otr-color-text-success:#38a169;
  --otr-color-text-warning:#ff8c00;
  --otr-color-text-info:#3182ce;
  --otr-color-border-primary:#ccc;
  --otr-color-border-secondary:#e0e0e0;
  --otr-color-border-focus:#ffe827;
  --otr-color-border-error:#e53e3e;
  --otr-color-error:#e53e3e;
  --otr-color-success:#38a169;
  --otr-color-warning:#ff8c00;
  --otr-color-info:#3182ce;
  --otr-color-inverted-background-primary:#000;
  --otr-color-inverted-text-primary:#fff;
  --otr-color-inverted-background-secondary:#333;
  --otr-color-inverted-background-tertiary:#404040;
  --otr-color-inverted-border-primary:#666;
  --otr-color-inverted-border-secondary:#555;
  --otr-color-inverted-text-secondary:#ccc;
  --otr-color-inverted-success:#7fc187;
  --otr-color-inverted-error:#fc8181;
  --otr-color-inverted-placeholder-background:#2d2d2d;
  --otr-color-inverted-placeholder-shimmer-base:#2d2d2d;
  --otr-color-inverted-placeholder-shimmer-highlight:#404040;
  --otr-color-placeholder-background:#f5f5f5;
  --otr-color-placeholder-shimmer-base:#f5f5f5;
  --otr-color-placeholder-shimmer-highlight:#fff;
  --otr-font-family-base:Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --otr-font-family-heading:inherit;
  --otr-font-size-xs:.875rem;
  --otr-font-size-sm:1rem;
  --otr-font-size-md:1.125rem;
  --otr-font-size-lg:1.375rem;
  --otr-font-size-xl:1.75rem;
  --otr-font-size-xxl:2.5rem;
  --otr-font-size-xxxl:2.5rem;
  --otr-font-size-huge:3rem;
  --otr-font-size-huge-xl:3.5rem;
  --otr-font-size-huge-xxl:4rem;
  --otr-font-size-huge-xxxl:4.5rem;
  --otr-font-weight-light:300;
  --otr-font-weight-normal:400;
  --otr-font-weight-semibold:600;
  --otr-font-weight-bold:700;
  --otr-line-height-base:1.5;
  --otr-line-height-heading:1.2;
  --otr-text-transform-base:none;
  --otr-space-unit:4px;
  --otr-space-xs:calc(var(--otr-space-unit) * 1);
  --otr-space-sm:calc(var(--otr-space-unit) * 2);
  --otr-space-md:calc(var(--otr-space-unit) * 4);
  --otr-space-lg:calc(var(--otr-space-unit) * 6);
  --otr-space-xl:calc(var(--otr-space-unit) * 8);
  --otr-size-button-min-width:64px;
  --otr-size-input-min-height:38px;
  --otr-border-radius-sm:.25rem;
  --otr-border-radius-md:1rem;
  --otr-border-radius-lg:2.5rem;
  --otr-border-width-sm:1px;
  --otr-border-width-md:2px;
  --otr-shadow-xs:0 .125rem .25rem rgba(0,0,0,.1);
  --otr-shadow-sm:0 .25rem .5rem rgba(0,0,0,.15);
  --otr-shadow-md:0 .5rem 1rem rgba(0,0,0,.2);
  --otr-shadow-lg:0 1rem 3rem rgba(0,0,0,.25);
  --otr-transition-duration:.15s;
  --otr-transition-timing-function:ease-in-out;
  --otr-z-index-dropdown:1000;
  --otr-z-index-sticky:1020;
  --otr-z-index-modal-backdrop:1040;
  --otr-z-index-modal:1050;
  --otr-z-index-popover:1060;
  --otr-z-index-tooltip:1070;
  --otr-text-shadow-primary:none;
  --otr-text-shadow-text-on-primary:none;
  --otr-drop-shadow-primary:1px 2px 1px rgba(0,0,0,.4);
  --otr-button-shadow:none;
  --otr-button-background-hover:var(--otr-color-secondary);
  --otr-button-text-color-hover:var(--otr-color-background-primary);
  --otr-button-border-color-hover:var(--otr-color-border-focus)
}

[data-theme="otr-css"] :host([data-otr-variant=primary]) {
  --otr-color-background-primary:var(--otr-color-primary);
  --otr-color-text-primary:var(--otr-color-primary-text);
  --otr-color-border-primary:none
}

[data-theme="otr-css"] :host([data-otr-variant=secondary]) {
  --otr-color-background-primary:var(--otr-color-secondary);
  --otr-color-text-primary:var(--otr-color-secondary-text);
  --otr-color-border-primary:none
}

[data-theme="otr-css"] :host([data-otr-variant=accent]) {
  --otr-color-background-primary:var(--otr-color-accent);
  --otr-color-text-primary:var(--otr-color-accent-text);
  --otr-color-border-primary:none
}

[data-theme="otr-css"] {
  --otr-button-font-size-override:var(--otr-font-size-sm);
  --otr-button-background:var(--otr-color-accent);
  --otr-button-color:var(--otr-color-accent-text);
  --otr-button-border-width:var(--otr-border-width-sm);
  --otr-button-border-style:solid;
  --otr-button-border-color:transparent;
  --otr-button-border-radius-override:var(--otr-border-radius-sm);
  --otr-button-font-weight-override:var(--otr-font-weight-semibold);
  --otr-button-text-transform-override:uppercase;
  --otr-button-padding-vertical-override:10px;
  --otr-button-padding-horizontal-override:26px
}

[data-theme="otr-css"] :host([data-otr-variant=error]) {
  --otr-color-background-primary:var(--otr-color-error);
  --otr-color-text-primary:#fff;
  --otr-color-border-primary:none
}

[data-theme="otr-css"] :host([data-otr-variant=success]) {
  --otr-color-background-primary:var(--otr-color-success);
  --otr-color-text-primary:#fff;
  --otr-color-border-primary:none
}

[data-theme="otr-css"] :host([data-otr-variant=warning]) {
  --otr-color-background-primary:var(--otr-color-warning);
  --otr-color-text-primary:#fff;
  --otr-color-border-primary:none
}

[data-theme="otr-css"] :host([data-otr-variant=info]) {
  --otr-color-background-primary:var(--otr-color-info);
  --otr-color-text-primary:#fff;
  --otr-color-border-primary:none
}

[data-theme="otr-css"] :host([data-otr-variant=neutral]) {
  --otr-color-background-primary:var(--otr-color-background-secondary);
  --otr-color-text-primary:var(--otr-color-text-primary);
  --otr-color-border-primary:var(--otr-color-border-secondary)
}

[data-theme="otr-css"] :host([data-otr-variant=light-emphasis]) {
  --otr-color-background-primary:var(--otr-color-background-tertiary);
  --otr-color-text-primary:var(--otr-color-text-primary);
  --otr-color-border-primary:var(--otr-color-border-secondary)
}

[data-theme="otr-css"] :host([data-otr-variant=dark-emphasis]) {
  --otr-color-background-primary:#666;
  --otr-color-text-primary:#fff;
  --otr-color-border-primary:none
}

[data-theme="otr-css"] :host([data-otr-variant=muted]) {
  --otr-color-background-primary:transparent;
  --otr-color-text-primary:var(--otr-color-primary);
  --otr-color-border-primary:var(--otr-color-border-primary)
}

[data-theme="otr-css"] .text-primary {
  text-shadow:var(--otr-text-shadow-primary)
}

[data-theme="otr-css"] :host([data-otr-variant=muted]) {
  text-shadow:var(--otr-text-shadow-primary)
}