/* Tiger Core — base utilities reused by multiple widgets. Loaded once. */

/* Split-text base — animations live in widget CSS, but display rules
   need to be present immediately to avoid flash-of-broken-layout. */
.tiger-elements .t-char,
.tiger-elements .t-word { display: inline-block; will-change: transform, opacity; }
.tiger-elements .t-line { display: block; overflow: hidden; }

/* Respect user motion preferences globally. Widgets opt out individually
   only if the animation is essential (rare). */
@media (prefers-reduced-motion: reduce) {
    .tiger-elements [data-tiger-motion] { transition: none !important; animation: none !important; }
}

/* Tiger Product Up-Sells — CSS-grid base so the --tg-ups-cols custom property
   (set per-breakpoint by the widget) drives a responsive column count,
   independent of the active theme's float/grid WooCommerce loop styles. */
.tg-upsells ul.products {
    display: grid;
    grid-template-columns: repeat(var(--tg-ups-cols, 4), minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tg-upsells ul.products::before,
.tg-upsells ul.products::after { content: none; display: none; }
.tg-upsells ul.products li.product {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
}
.tg-upsells ul.products li.product img { width: 100%; height: auto; display: block; }

/* Tiger Product Rating — self-contained unicode-star renderer that does NOT
   depend on WooCommerce's "star" webfont/CSS being enqueued (it often isn't on
   a custom Tiger template). The filled layer is clipped to the rating width. */
.tg-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.tg-rating .tg-stars { position: relative; display: inline-block; line-height: 1; white-space: nowrap; font-size: 1.15em; }
.tg-rating .tg-stars-empty { color: #d9d9d9; }
.tg-rating .tg-stars-fill { position: absolute; top: 0; left: 0; width: 0; overflow: hidden; color: #f5a623; white-space: nowrap; }
.tg-rating .tg-stars-empty::before,
.tg-rating .tg-stars-fill::before { content: "\2605\2605\2605\2605\2605"; } /* ★★★★★ */
/* Screen-reader-only detail text (never visually shown). */
.tg-rating .tg-sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Tiger Breadcrumbs — self-contained flex trail; never depends on theme CSS.
   Links/current/separator align on a shared baseline; icons inherit em sizing. */
.tg-bc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tg-bc a,
.tg-bc .tg-bc-current {
    display: inline-flex; align-items: center; gap: 6px;
    text-decoration: none; transition: color .2s ease, background-color .2s ease;
}
.tg-bc .tg-bc-sep { display: inline-flex; align-items: center; opacity: .7; }
.tg-bc .tg-bc-sep svg,
.tg-bc-home-icon,
.tg-bc-home-icon svg { width: 1em; height: 1em; fill: currentColor; }

/* Tiger Author Box — self-contained flex layout (replaces former inline styles). */
.tg-author { display: flex; gap: 16px; align-items: flex-start; }
.tg-author-content { min-width: 0; }
.tg-author-avatar img { display: block; }
.tg-author-name { font-weight: 600; margin: 0; }
.tg-author-name a { text-decoration: none; }
.tg-author-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; }
.tg-author-meta a { text-decoration: none; transition: color .2s ease; }
.tg-author-social { display: inline-flex; align-items: center; gap: 10px; }
.tg-author-social a { display: inline-flex; line-height: 1; }
.tg-author-social svg { width: 1em; height: 1em; fill: currentColor; }
.tg-author .tg-sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Tiger Post Navigation — self-contained prev/next flex layout (replaces former
   inline styles). Prev hugs the left, next hugs the right; arrows sit outermost. */
.tg-nav { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tg-nav-prev, .tg-nav-next { display: flex; flex: 1 1 0; min-width: 0; }
.tg-nav-next { justify-content: flex-end; }
.tg-nav-next .tg-nav-text { text-align: right; }
.tg-nav a { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; max-width: 100%; }
.tg-nav-text { display: flex; flex-direction: column; min-width: 0; }
.tg-nav-label { display: block; }
.tg-nav-title { display: block; overflow: hidden; text-overflow: ellipsis; }
.tg-nav-arrow { display: inline-flex; align-items: center; line-height: 1; flex: none; }
.tg-nav-arrow svg { width: 1em; height: 1em; fill: currentColor; }
.tg-nav-thumb { flex: none; line-height: 0; }
.tg-nav-thumb img { display: block; width: 64px; height: 64px; object-fit: cover; }

/* Tiger Post Comments — self-contained layout for the native comment list + form,
   so the widget never depends on the active theme's comment CSS. */
.tg-comments-title { margin: 0 0 20px; }
.tg-comments .tg-comment-list,
.tg-comments .commentlist { list-style: none; margin: 0 0 28px; padding: 0; }
.tg-comments .children { list-style: none; margin: 14px 0 0; padding-left: 32px; }
.tg-comments li.comment { margin-bottom: 16px; }
.tg-comments .comment-body { padding: 18px; }
.tg-comments .comment-author.vcard { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.tg-comments .comment-author .avatar { width: 48px; height: 48px; border-radius: 50%; display: block; flex: none; }
.tg-comments .comment-author .fn { font-weight: 600; font-style: normal; }
.tg-comments .comment-author .says { opacity: .7; font-size: .85em; }
.tg-comments .comment-meta { font-size: .85em; opacity: .8; margin-bottom: 8px; }
.tg-comments .comment-meta a { text-decoration: none; }
.tg-comments .comment-content { margin: 0; }
.tg-comments .comment-content p { margin: 0 0 10px; }
.tg-comments .reply { margin-top: 10px; }
.tg-comments .reply a,
.tg-comments .comment-reply-link { text-decoration: none; transition: color .2s ease, background-color .2s ease; }
.tg-comments .comment-respond { margin-top: 8px; }
.tg-comments .comment-reply-title { margin: 0 0 16px; }
.tg-comments .comment-form { display: flex; flex-direction: column; gap: 14px; }
.tg-comments .comment-form p { margin: 0; }
.tg-comments .comment-form label { display: block; margin-bottom: 6px; }
.tg-comments .comment-form input[type="text"],
.tg-comments .comment-form input[type="email"],
.tg-comments .comment-form input[type="url"],
.tg-comments .comment-form textarea {
    width: 100%; box-sizing: border-box; padding: 10px 12px;
    border: 1px solid #d9d9d9; border-radius: 6px; background: #fff;
    font: inherit; transition: border-color .2s ease, background-color .2s ease;
}
.tg-comments .comment-form textarea { resize: vertical; min-height: 120px; }
.tg-comments .form-submit input,
.tg-comments #submit {
    cursor: pointer; padding: 11px 22px; border: 0; border-radius: 6px;
    background: #1769ff; color: #fff; font: inherit; transition: background-color .2s ease, transform .2s ease;
}

/* Tiger Post Content — base layout for the formatted body so the widget renders
   sensibly without theme content CSS (full styling comes from the panel controls). */
.tg-dyn-ct-text > :last-child { margin-bottom: 0; }
.tg-dyn-ct-text img { max-width: 100%; height: auto; }
.tg-dyn-ct-text figure { margin: 0 0 1em; }
.tg-dyn-ct-text figcaption,
.tg-dyn-ct-text .wp-caption-text { font-size: .85em; opacity: .8; margin-top: 6px; }
.tg-dyn-ct-text blockquote { margin: 0 0 1em; padding: 12px 18px; border-inline-start: 4px solid currentColor; }
.tg-has-dropcap .tg-dyn-ct-text > p:first-of-type::first-letter {
    float: left; font-size: 3.2em; line-height: .8; font-weight: 700; margin-right: 8px; margin-top: 4px;
}

/* Tiger Repeater — layout for CPT Builder repeater/group rows (moved out of the
   former inline <style> dump so it caches and respects get_style_depends). */
.tg-rpt { display: flex; flex-direction: column; gap: 16px; }
.tg-rpt.tg-rpt-grid { display: grid; }
.tg-rpt-row { display: flex; flex-direction: column; gap: 6px; }
.tg-rpt-cell { display: flex; flex-direction: column; gap: 2px; }
.tg-rpt-label { font-size: .75em; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.tg-rpt-img { max-width: 100%; height: auto; border-radius: 6px; }
.tg-rpt-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: 6px; vertical-align: middle; border: 1px solid rgba(0,0,0,.1); }
.tg-rpt-notice, .tg-rpt-empty { opacity: .6; font-style: italic; }

/* Tiger Related Items — self-contained card grid (former inline styles removed). */
.tg-rel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tg-rel-card { display: flex; flex-direction: column; }
.tg-rel-thumb { display: block; line-height: 0; overflow: hidden; }
.tg-rel-thumb img { width: 100%; height: auto; display: block; }
.tg-rel-title { margin: 8px 0 0; }
.tg-rel-title a { text-decoration: none; }
.tg-rel-notice, .tg-rel-empty { opacity: .6; font-style: italic; }

/* Tiger Repeater Loop — grid shell around per-row template renders (inline grid
   style removed; per-row design lives in the chosen template). */
.tg-rloop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tg-rloop-item { min-width: 0; }
.tg-rloop-notice, .tg-rloop-empty { opacity: .6; font-style: italic; }

/* Tiger Button — preset base styles (moved out of a per-render inline <style>). */
.tg-dyn-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: all .3s ease; font-weight: 500; cursor: pointer; }
.tg-dyn-btn-preset-solid { background: #ec7002; color: #fff; padding: 12px 24px; border-radius: 6px; }
.tg-dyn-btn-preset-solid:hover { background: #4f46e5; color: #fff; }
.tg-dyn-btn-preset-outline { background: transparent; color: #ec7002; border: 2px solid #ec7002; padding: 10px 22px; border-radius: 6px; }
.tg-dyn-btn-preset-outline:hover { background: #ec7002; color: #fff; }
.tg-dyn-btn-preset-ghost { background: transparent; color: #64748b; padding: 12px 24px; }
.tg-dyn-btn-preset-ghost:hover { background: #f1f5f9; color: #0f172a; }
.tg-dyn-btn-before, .tg-dyn-btn-after { display: inline-flex; align-items: center; justify-content: center; }

/* Tiger Title — icon/text alignment (moved out of a per-render inline <style>). */
.tg-dyn-tt-inner { display: inline-flex; align-items: center; flex-wrap: wrap; text-decoration: none; transition: all .3s ease; }
.tg-dyn-tt-icon { display: inline-flex; align-items: center; transition: all .3s ease; }

/* Tiger Featured Image — base (moved out of an inline style attribute). */
.tg-dyn-fi-img { display: inline-block; max-width: 100%; height: auto; transition: all .3s ease; }

/* Tiger Dynamic Fields — optional caption rendered inside the widget so that
   "Hide if Empty" removes the label together with the value. A Heading widget
   placed alongside cannot do this: it has no knowledge of whether the field
   resolved. Gap is driven by the panel control via --tg-dyn-label-gap. */
.tg-dyn-mt-wrap.tg-dyn-has-label { --tg-dyn-label-gap: 4px; }
.tg-dyn-mt-label { color: inherit; }
/* Label icon: sized in em so it tracks the caption's typography. */
.tg-dyn-mt-label-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    margin-inline-end: var(--tg-dyn-label-icon-gap, 6px);
    vertical-align: -.1em;
}
.tg-dyn-mt-label-icon svg { width: var(--tg-dyn-label-icon-size, 1em); height: var(--tg-dyn-label-icon-size, 1em); fill: currentColor; }
.tg-dyn-mt-label-icon i   { font-size: var(--tg-dyn-label-icon-size, 1em); line-height: 1; }
.tg-dyn-label-above .tg-dyn-mt-label {
    display: block;
    margin-block-end: var(--tg-dyn-label-gap, 4px);
}
.tg-dyn-label-inline .tg-dyn-mt-label {
    display: inline-block;
    margin-inline-end: var(--tg-dyn-label-gap, 4px);
    vertical-align: baseline;
}

/* Tiger Field Group — caption/value rows that remove themselves when empty.
   Rendered as a description list, so dt/dd need their browser defaults reset. */
.tg-fg {
    display: flex;
    flex-direction: column;
    margin: 0;
    --tg-fg-pair-gap: 4px;
    --tg-fg-cap-width: 34%;
    --tg-fg-divider-width: 1px;
    /* Subtle by default: currentColor would draw a full-strength text-coloured
       rule between every row, which reads as a table, not a divider. */
    --tg-fg-divider-color: rgba(128, 128, 128, .25);
}
.tg-fg-row { display: flex; flex-direction: column; gap: var(--tg-fg-pair-gap); }
.tg-fg dt, .tg-fg dd { margin: 0; }
.tg-fg-label { font-weight: 700; }
/* Row icon: sits with the caption, sized off the surrounding text so it stays
   proportional when typography changes, and never shrinks in a flex row. */
.tg-fg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    margin-inline-end: var(--tg-fg-icon-gap, 6px);
    vertical-align: -.1em;
}
.tg-fg-icon svg { width: var(--tg-fg-icon-size, 1em); height: var(--tg-fg-icon-size, 1em); fill: currentColor; }
.tg-fg-icon i   { font-size: var(--tg-fg-icon-size, 1em); line-height: 1; }
/* Placeholder keeping an icon-less caption in line with its neighbours. */
.tg-fg-icon--none { width: var(--tg-fg-icon-size, 1em); }
/* A long unbroken value — a URL is the usual culprit — must not push past the
   card it sits in. flex:1 alone will not shrink below the longest word. */
.tg-fg-value { min-width: 0; overflow-wrap: anywhere; }

/* Caption beside the value, wrapping when it must. The pair gap is tuned for
   the stacked layout, where 4px reads right; side by side that is too tight,
   so the horizontal gap adds to it rather than needing a second control. */
.tg-fg--inline .tg-fg-row { flex-direction: row; align-items: baseline; flex-wrap: wrap; }
.tg-fg--inline .tg-fg-row,
.tg-fg--columns .tg-fg-row { column-gap: calc(var(--tg-fg-pair-gap) + 8px); }

/* Two columns: every value starts at the same x, which is what makes a spec
   list read as a table without being one. Collapses on narrow screens. */
.tg-fg--columns .tg-fg-row {
    flex-direction: row;
    align-items: baseline;
    gap: var(--tg-fg-pair-gap);
}
.tg-fg--columns .tg-fg-label { flex: 0 0 var(--tg-fg-cap-width); max-width: var(--tg-fg-cap-width); }
.tg-fg--columns .tg-fg-value { flex: 1 1 0; }
@media (max-width: 480px) {
    .tg-fg--columns .tg-fg-row { flex-direction: column; }
    .tg-fg--columns .tg-fg-label { flex-basis: auto; max-width: none; }
}

.tg-fg--divided .tg-fg-row + .tg-fg-row {
    border-top: var(--tg-fg-divider-width) solid var(--tg-fg-divider-color);
    padding-top: var(--tg-fg-pair-gap);
}
.tg-fg-value a { color: inherit; }

/* Editor only: a row whose field is empty is drawn faded with an explicit note,
   so "this disappears for visitors" is visible rather than implied. The class is
   never emitted on the front end. */
.tg-fg-row--ghost { opacity: .45; }
.tg-fg-row--ghost .tg-fg-value { font-style: italic; }