/* Attribute Tooltips for WooCommerce - front end styles */
.wcat-trigger {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 6px;
padding: 2px 4px;
border-radius: 4px;
background: transparent;
color: inherit;
text-decoration: none;
font-size: 0.8em;
line-height: 1.6;
vertical-align: middle;
white-space: nowrap;
}
.wcat-trigger:hover,
.wcat-trigger:focus-visible {
color: inherit;
text-decoration: underline;
}
.wcat-trigger:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
/* "Float right" position setting: a dedicated, right-aligned line placed
immediately above the select (see insertAboveControl() in
wcat-tooltip.js). The label and the select normally share one table
row with a label column sized to fit its text and a value column
taking the rest, so there's no reliable spare space beside the label
to put anything without it landing on top of either the label text or
the select - a dedicated line sidesteps that regardless of either
column's width. */
.wcat-trigger-line {
text-align: right;
margin-bottom: 6px;
}
.wcat-trigger--right {
margin-left: 0;
}
.wcat-icon-wrap {
display: inline-flex;
width: 16px;
height: 16px;
flex: 0 0 16px;
}
.wcat-icon {
width: 100%;
height: 100%;
display: block;
}
.wcat-trigger-text {
display: inline-block;
}
/* Lightbox */
dialog.wcat-lightbox,
.wcat-lightbox-fallback .wcat-lightbox {
width: 60vw;
max-width: 60vw;
max-height: 90vh;
height: auto;
padding: 0;
border: 0;
border-radius: 8px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
/* Belt-and-braces: if content is still taller than the 90vh cap for any
reason, scroll inside the box instead of bleeding past the viewport. */
overflow-y: auto;
box-sizing: border-box;
}
dialog.wcat-lightbox::backdrop {
/* Matches Magnific Popup's default overlay (#0b0b0b at 0.8 opacity),
used elsewhere on the site, for a consistent look between the two. */
background: rgba(11, 11, 11, 0.8);
}
.wcat-lightbox__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.wcat-lightbox__title {
margin: 0;
font-size: 1em;
font-weight: 600;
}
.wcat-lightbox__close {
appearance: none;
background: transparent;
border: 0;
font-size: 1.4em;
line-height: 1;
padding: 4px 8px;
cursor: pointer;
color: inherit;
}
.wcat-lightbox__close:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
.wcat-lightbox__body {
padding: 18px;
}
/*
* Minimal chrome for image/video/pdf content: no panel background, no
* title, just the media itself with a small close button pinned to the
* top-right. Text/page content keeps the panelled header above.
*/
dialog.wcat-lightbox.wcat-lightbox--media,
.wcat-lightbox-fallback .wcat-lightbox.wcat-lightbox--media {
/* Shrink-wraps to the media's own size (driven by the 90vh image/video
height below) instead of the fixed 60vw panel width used for text. */
width: auto;
max-width: 95vw;
background: transparent;
box-shadow: none;
border-radius: 0;
}
.wcat-lightbox--media .wcat-lightbox__header {
position: absolute;
top: 6px;
right: 6px;
z-index: 1;
padding: 0;
border-bottom: 0;
}
.wcat-lightbox--media .wcat-lightbox__title {
display: none;
}
.wcat-lightbox--media .wcat-lightbox__close {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
font-size: 1.1em;
background: rgba(0, 0, 0, 0.6);
color: #fff;
border-radius: 50%;
}
.wcat-lightbox--media .wcat-lightbox__body {
padding: 0;
text-align: center;
}
.wcat-lightbox--media .wcat-lightbox__file-name {
color: #fff;
}
.wcat-lightbox__media img {
/* Shrink-only cap, matching the full-size original image rendered here
(see render_image() in class-wcat-content-renderer.php) - the same
approach the site's own Magnific Popup image galleries use: no
forced/upscaled box, just a ceiling on the real image's own size.
!important: some hosts/themes add an inline height (e.g. a lazy-load
or layout-shift-prevention script setting style="height:...px" once
the image loads), and an inline style otherwise beats this external
stylesheet rule regardless of specificity. */
width: auto !important;
height: auto !important;
max-width: 95vw !important;
max-height: 90vh !important;
display: block;
margin: 0 auto;
}
.wcat-lightbox__media--video {
/* Sized to fit within 95vw x 90vh while keeping a 16:9 box, using the
min()/calc() letterboxing trick: for each axis, take whichever of
"the full allowance on this axis" or "the other axis's allowance
converted through the aspect ratio" is smaller. This gives the
wrapper itself the correct final size (rather than leaving width
and height to be capped independently, which - since an iframe has
no intrinsic aspect ratio for the browser to preserve the way it
would for an ![]()
- could otherwise settle on a mismatched width
and height and leave the video sitting off-centre in extra empty
space). The dialog (width/height: auto) then shrink-wraps to
exactly this box, so there's no leftover space to centre it within.
*/
position: relative;
width: min(95vw, calc(90vh * 16 / 9));
height: min(90vh, calc(95vw * 9 / 16));
margin: 0 auto;
}
.wcat-lightbox__media--video iframe,
.wcat-lightbox__media--video embed,
.wcat-lightbox__media--video object {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
}
.wcat-lightbox__file {
text-align: center;
padding: 24px 0;
}
.wcat-lightbox__file-name {
margin: 0 0 12px;
word-break: break-word;
}
.wcat-lightbox__button {
display: inline-block;
padding: 10px 20px;
border-radius: 4px;
background: #1e1e1e;
color: #fff;
text-decoration: none;
font-weight: 600;
}
.wcat-lightbox__button:hover,
.wcat-lightbox__button:focus-visible {
background: #000;
color: #fff;
}
.wcat-lightbox__text p:first-child {
margin-top: 0;
}
.wcat-lightbox__text p:last-child {
margin-bottom: 0;
}
/* Fallback modal used only when the browser has no