/**
 * 2025-2026 CyliumDev
 * @license   Proprietary - Non-commercial use only
 *
 * Product information widget (cyliumee-productinfo handle).
 * Own stylesheet so a page only pays for the widgets it renders; depends on
 * 'cyliumee-front' (shared commons) for cascade order.
 *
 * ⚠️ No `!important` anywhere on border / border-radius / padding / width:
 * every one of those is driven by a Creative Elements control, and a hard-coded
 * !important here would silently beat the generated rule (0,4,0) — the trap
 * already paid for on the carousel arrows of cats.css / carousel.css.
 */

/* --------------------------------------------------------------- CONTAINER */
/*
 * Gutter pattern rather than `column-gap`: with a gap, two elements set to 50%
 * add up to 100% + gap and wrap onto two lines. Negative margin on the row plus
 * half the gap as padding on each item keeps the percentages exact, which is
 * what the "Custom size" control promises. Row spacing stays a real row-gap.
 */
.cyliumee-pi {
    --cee-pi-gap: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: var(--cee-pi-gap);
    margin-inline: calc(var(--cee-pi-gap) / -2);
}

.cyliumee-pi__item {
    box-sizing: border-box;
    min-width: 0;
    padding-inline: calc(var(--cee-pi-gap) / 2);
}

.cyliumee-pi__item--full {
    flex: 0 0 100%;
    max-width: 100%;
}

.cyliumee-pi__item--inline {
    flex: 0 1 auto;
    max-width: 100%;
}

/*
 * --cee-pi-w is set per row by the responsive "Custom size" control, on
 * .elementor-repeater-item-<id>. It is read ONLY here: Creative Elements
 * generates repeater style rules from the raw row values without checking the
 * row's conditions, so a row switched back to "Full width" still carries the
 * variable — consuming it under this modifier only is what keeps that harmless.
 */
.cyliumee-pi__item--custom {
    flex: 0 0 var(--cee-pi-w, 100%);
    max-width: 100%;
}

/* ------------------------------------------------------------------- TITLE */
.cyliumee-pi__title {
    margin: 0;
    line-height: 1.2;
    overflow-wrap: break-word;
}

/* -------------------------------------------------------------------- TEXT */
.cyliumee-pi__text {
    line-height: 1.55;
    overflow-wrap: break-word;
}

.cyliumee-pi__text > *:first-child {
    margin-top: 0;
}

.cyliumee-pi__text > *:last-child {
    margin-bottom: 0;
}

.cyliumee-pi__text img {
    max-width: 100%;
    height: auto;
}

/* ------------------------------------------------------------------- PRICE */
.cyliumee-pi__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5em;
}

.cyliumee-pi__price-current {
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.1;
}

.cyliumee-pi__price-regular {
    text-decoration: line-through;
    opacity: 0.65;
}

.cyliumee-pi__price-discount {
    padding: 0.15em 0.45em;
    border-radius: 3px;
    font-size: 0.85em;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.cyliumee-pi__price-unit,
.cyliumee-pi__price-tax {
    font-size: 0.85em;
    opacity: 0.75;
}

/* ---------------------------------------------------- META / AVAILABILITY */
.cyliumee-pi__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    line-height: 1.4;
}

.cyliumee-pi__meta-label {
    font-weight: 600;
}

.cyliumee-pi__meta-value {
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ BUTTON */
/*
 * 🔴 NOT ONE COLOUR HERE. The button wears the shop theme's own classes
 * (`btn btn-primary`, `btn btn-secondary`, `btn btn-outline-primary`,
 * `btn btn-link` — all four verified in classic AND hummingbird), so background,
 * text colour, border, radius, padding, font and hover states are the theme's
 * business. Until 1.0.67 this file painted a #2b2b35 fill and three variants of
 * its own, which is exactly why "Primary" and "Secondary" never looked like the
 * theme: same specificity as `.btn-primary` (0,1,0), and our stylesheet loads
 * last. Repainting a themed button is the trap already paid for in 1.0.57.
 *
 * What is left is LAYOUT only, and it sits at 0,2,0 on purpose: it must beat the
 * theme's own `.btn { display: inline-block }` (0,1,0, Bootstrap 4 in classic and
 * 5 in hummingbird) whatever the stylesheet order, or the icon+text flex row
 * collapses — while staying below the Style tab's generated rules
 * (`{{WRAPPER}} .cyliumee-pi__button`, 0,4,0), so every control still wins.
 *
 * `--variant-*` survives as a class but carries nothing: the theme classes
 * emitted next to it do the painting. It is kept as a targeting hook, and
 * because merchant CSS written against 1.0.63+ may already use it.
 */
.cyliumee-pi .cyliumee-pi__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    max-width: 100%;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

/*
 * `<button>` does not inherit the page font — a UA default would swap the
 * typeface as soon as the buy element renders as a real submit button instead of
 * an anchor. Inheriting is a no-op for the anchor and the link variants.
 */
.cyliumee-pi button.cyliumee-pi__button {
    font-family: inherit;
    font-size: inherit;
}

.cyliumee-pi .cyliumee-pi__button:hover,
.cyliumee-pi .cyliumee-pi__button:focus {
    text-decoration: none;
}

.cyliumee-pi__button--disabled,
.cyliumee-pi .cyliumee-pi__button[disabled] {
    cursor: not-allowed;
}


/*
 * Hook / module widget element: no styling of the module's own markup, only the
 * guarantee that it cannot spill out of its column.
 */
.cyliumee-pi__hook {
    min-width: 0;
    max-width: 100%;
}

.cyliumee-pi__hook > :last-child {
    margin-bottom: 0;
}

.cyliumee-pi__button-icon {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    line-height: 1;
}

/*
 * IconsManager INLINES an uploaded SVG instead of wrapping it in an <img>, and
 * an inline SVG only follows the "Icon size" and text colour when it is sized in
 * em and painted with currentColor. Without these two lines the SVG icons render
 * at their intrinsic size and ignore every colour setting.
 */
.cyliumee-pi__button-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.cyliumee-pi__button-text {
    min-width: 0;
}

/* ---------------------------------------------------------------- VARIANTS */
/*
 * The variants element reuses views/css/variants.css untouched — same
 * `.cyliumee-pv__*` markup as CE_Widget_ProductVariants, so both widgets can
 * never drift apart. Only the pieces that sheet deliberately leaves to the
 * widget's controls (option border and padding, swatch padding, the two gaps,
 * the table label width) are declared here, as a BASELINE.
 *
 * Why here and not as control defaults: every colour, size and radius of the
 * "Variants" style section is empty by default (house rule), and Creative
 * Elements generates its style rules from the settings MERGED with their defaults
 * (core/files/css/post.php:302) — a non-empty default is therefore always
 * emitted, which is precisely what would have frozen square swatches to a round
 * radius. A baseline at 0,2,0 keeps the native look while every control, at
 * 0,4,0 or more, still wins.
 *
 * Colours are NOT here: variants.css already carries the native fallbacks
 * (--cee-pv-opt-border #818a91, --cee-pv-opt-border-checked #5bc0de).
 */
.cyliumee-pi .cyliumee-pv__item {
    gap: 5px;
}

.cyliumee-pi .cyliumee-pv__options {
    gap: 10px;
}

.cyliumee-pi .cyliumee-pv__option {
    border-style: solid;
    border-width: 2px;
    padding: 5px 10px;
}

/* background-clip: content-box (variants.css) turns this into the native ring
   between the swatch border and its colour. */
.cyliumee-pi .cyliumee-pv__radio > .cyliumee-pv__swatch {
    padding: 2px;
}

/* Table layout: without a min-width the labels of two rows do not line up. */
.cyliumee-pi .cyliumee-pv--layout-table .cyliumee-pv__label {
    min-width: 100px;
}

/* Empty / unsupported render paths are emitted hidden — see the widget class. */
.cyliumee-pi--empty,
.cyliumee-pi--unsupported {
    display: none;
}