/* Only what the static rebuild adds to the captured theme. */
.product-box[hidden], .lens-sidebar li[hidden] { display: none; }
ul.feature-lists li.is-na { opacity: 0.5; }

/* The theme asks for Font Awesome Pro, whose files weren't captured. These point it at the official free version. */
@font-face { font-family: "Font Awesome 5 Pro"; font-weight: 100 900; src: url(../webfonts/fa-solid-900.woff2) format("woff2"); }
@font-face { font-family: "Font Awesome 5 Brands"; src: url(../webfonts/fa-brands-400.woff2) format("woff2"); }
.search-triger .fa, .search-triger i:before, header .upload-btn i { font-weight: 900 !important; }

/* Logo: Tito's vector mark with the wordmark as live text, so it stays sharp at any size. */
.logo a.vector-logo { display: flex !important; flex-direction: row; align-items: center; gap: 9px; width: 300px; color: #000; text-decoration: none; }
.logo a.vector-logo img { display: block; width: 46px !important; height: 46px !important; max-width: none; margin: 0; flex: none; }
.vector-logo span { display: block; font-family: 'Montserrat', sans-serif; text-transform: uppercase; line-height: 1.15; white-space: nowrap; }
.vector-logo small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 1.05px; }
.vector-logo b { display: block; font-size: 20px; font-weight: 500; letter-spacing: 2px; }

/* Videos are regular YouTube players, without the theme's click-to-load cover. */
.plain-video { background: #000; }
.plain-video iframe { display: block; }
.inline-video.plain-video { padding-top: 56.25%; }
.video-thumb-row .plain-video { margin-bottom: 20px; }
.home-video-wrap { clear: both; }
.home-video-text { text-align: center; font-size: 16px; padding: 30px 15px 20px; margin: 0; color: #00458f; }
.home-video:before { display: none; }

/* Page titles clear the fixed header, with or without a banner image. */
.inner-banner { padding: 130px 0 40px; }

/* Lens grid: an empty cell closes the last row. */
ul.feature-lists li.is-blank { padding: 0; min-height: 1px; }

/* Home: Special Lenses, same shape in every cell. */
.special-wrap .gallery-box .lazy-image { position: relative; overflow: hidden; }
.special-wrap .gallery-box .lazy-image img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

/* Lens list: advanced search only opens on request. */
.search-toggle { clear: both; text-align: center; margin: -10px 0 25px; }
#search-panel[hidden] { display: none; }

/* Lens list: filters. Closed boxes share a width; open lists grow to fit their longest name. */
.lens-filters { clear: both; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-top: 18px; text-align: left; }
.lens-filters label { display: block; font-size: 12px; font-weight: 500; text-transform: uppercase; color: #00458f; margin: 0; }
.lens-filters select { width: 100%; margin-top: 4px; padding: 6px 8px; font-size: 14px; }
.lens-filters .selectric-wrapper { width: 100% !important; margin-top: 4px; text-transform: none; }
.lens-filters .selectric .label { margin: 0 34px 0 10px; height: 38px; line-height: 38px; font-size: 14px; font-weight: 400; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lens-filters .selectric .button { height: 38px; }
.lens-filters .selectric-items { width: max-content !important; min-width: 100%; max-width: min(380px, 85vw); z-index: 200; }
.lens-filters .selectric-items li { font-size: 14px !important; line-height: 1.3; white-space: normal; text-transform: none; }
.lens-filters label:nth-child(3n) .selectric-items { right: 0; left: auto; }
@media (max-width: 767px) { .lens-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lens-filters label:nth-child(3n) .selectric-items { right: auto; left: 0; } .lens-filters label:nth-child(2n) .selectric-items { right: 0; left: auto; } }
.lens-status { clear: both; padding-top: 14px; font-size: 14px; }
#lens-reset { margin-left: 10px; padding: 0; border: 0; background: none; color: #007bff; text-decoration: underline; cursor: pointer; }

/* Lens list: sidebar with every name */
.lens-browser { display: flex; align-items: flex-start; gap: 20px; clear: both; }
.lens-sidebar { flex: 0 0 250px; position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; padding: 14px; background: #e8f2fe; }
.lens-sidebar summary { font-weight: 600; text-transform: uppercase; color: #00458f; cursor: pointer; }
.lens-sidebar ul { list-style: none; margin: 10px 0 0; padding: 0; }
.lens-sidebar li { padding: 7px 0; font-size: 13px; line-height: 1.3; border-bottom: 1px solid #b2c7df; }
.lens-sidebar li:last-child { border-bottom: 0; }
.lens-sidebar li:before { display: none; }
.lens-sidebar a { color: #333; }
.lens-sidebar a:hover { color: #007bff; }
.lens-browser .col-4-product { flex: 1; min-width: 0; margin: 0; }
.lens-browser .product-box { width: 32.33%; margin: 0 0 1% 1%; }
@media (max-width: 991px) { .lens-browser .product-box { width: 49%; } }
@media (max-width: 767px) {
  .lens-browser { flex-direction: column; }
  .lens-sidebar { position: static; flex: none; width: 100%; max-height: 50vh; }
  .lens-browser .product-box { width: 100%; margin-left: 0; }
}

/* History */
.history-list { padding: 30px 0; }
.history-list h2 { margin-top: 30px; }
.history-list figure { margin: 18px 0; max-width: 900px; }
.history-list img { width: 100%; height: auto; border: 1px solid #d6d6d6; }
.history-list figcaption { font-size: 13px; margin-top: 6px; }

/* Add Lens */
#add-lens .row > div { margin-bottom: 16px; }
#add-lens label { display: block; font-weight: 500; margin-bottom: 4px; }
#add-lens label small { font-weight: 400; color: #747474; margin-left: 4px; }
#add-lens input:not([type=file]), #add-lens textarea, #add-lens select { width: 100%; padding: 8px 10px; border: 1px solid #d6d6d6; background: #fff; }
#add-lens .selectric-wrapper { width: 100% !important; }
#add-lens [hidden] { display: none; }
.add-lens-heading { clear: both; margin: 20px 0 14px; font-size: 18px; font-weight: 600; text-transform: uppercase; }
#send-step { margin-top: 20px; padding: 16px; background: #e8f2fe; }
