/**
 * The product highlight: the arch, the pictures going soft inside it, the two cards that never move, and
 * the caption that does, laid over the foot of whichever picture is showing.
 *
 * The three nested boxes each solve one problem, and the nesting is the solution rather than
 * tidiness. The stage is allowed to spill, because the design hangs the gold ring 22px outside the
 * frame and both cards off its sides. The frame clips, because the frame is the arch — a picture
 * escaping a rounded outline would undo the shape that is the whole reason the widget exists. The
 * cards therefore live on the stage and are positioned against the same box the frame occupies, which
 * is why `top: 18%` on a card means the same thing as `top: 18%` on the frame.
 *
 * "Allowed to spill" is as far as it goes: the widget's own box holds the spill, by a padding the
 * widest of the ring and the cards decides. Nothing here may depend on room beside the widget, because
 * there is none to depend on — the parent theme's reset clips the page's overflow at its edge, and the
 * Elementor canvas is narrower than the window a published page is usually seen in, so a widget that
 * left the arch's cards outside its own box kept them on a wide monitor and lost them in the editor.
 * The reference has the same arrangement without having to think about it: its stage is centred inside
 * a half-width grid column, so the air either side of the arch is structural rather than borrowed.
 *
 * The caption is the third thing inside the frame, not a panel beneath it. That is the design, and it
 * is also the only version of the widget in which the frame is the size the design drew: a panel under
 * the arch is a second box that shortens the picture, and a caption on a box is a caption about a box
 * rather than about the fabric. The shade already drawn across the foot of the frame is what makes
 * white text readable over any swatch, so the caption needs nothing of its own behind it.
 *
 * Two transitions run on every picture and they are not the same length, which is the trick. The
 * cross-fade is quick enough to be noticed as a change; the drift underneath it is slow enough that a
 * picture is still moving while it is on screen, so the frame never looks like it stalled between
 * products. They are two properties of one element, so they need no second element to stage.
 *
 * The caption's arrival is a keyframe animation rather than a transition, replayed by the script, and
 * the delay is a per-line one: the name arrives, then the other name under it, then the code pill at
 * the other end of the row. Written as a transition it would have been a single move, and a single move
 * is the difference between reading a new product and noticing that something moved. The resting state
 * is the *visible* one, so a visitor with the script blocked, or a crawler, or a reader who lands on
 * the page mid-cycle, sees a caption rather than an empty space.
 *
 * The root is a two-item flex row rather than a box holding one. The design — the arch, the cards, the
 * dots — is the first item, and the second is a slot the page fills in later, so the widget is the
 * half of the arrangement that is already drawn and the other half is a box waiting for markup. The
 * frame's width belongs to the first item and not to the root for the same reason: a root sized to the
 * arch would squeeze the pair of columns into one, and the design would end up in the middle of what is
 * meant to be the left of the page. The first item asks for the whole row and is capped by the
 * design's own number — `width: 100%` against a `max-width`, which is how the reference writes its
 * stage and the only arrangement that fills a column narrower than the design at every breakpoint — so
 * the second item takes what is left of the row once the cap has clamped the first. That item is also
 * given a floor of its own, 616px, which is the design's 492.8px frame at its 1.25 ratio, so that
 * shrinking the frame in the panel shortens the picture without letting the pair of columns stop being a
 * pair. The row is as tall as the taller of the two, and `align-items: flex-start` keeps each at its own
 * height rather than stretched to the other's.
 *
 * The columns collapse to one below 1024px, and the floor goes with them: on a phone the arch is as tall
 * as the screen asks it to be and a fixed 616px would be a shorter picture with a strip of nothing under
 * it. The gold ring and its bead are kept at every width, mobile included.
 *
 * Every Elementor control here writes a custom property rather than a rule, so a page that never
 * touched a control still shows the design as drawn, and a page that did can repaint the widget
 * without any generated CSS changing.
 */

.newtex-highlight {
    /* The design's stage, as the mock draws it: 440px wide, a quarter taller than it is wide, gold
       ring, graphite pictures. The radius is decided by the outline below rather than set here. */
    --newtex-highlight-width: 440px;
    --newtex-highlight-height: 550px;
    --newtex-highlight-radius: 0px;
    /* The arch's flat foot, which is the one radius in the design that is not the shoulders' number: the
       mock draws 14px there, and 20px on a phone. It is a variable rather than the 14px written into the
       rule below because the reference changes it at its own 767px step, and a literal in the rule would
       have meant two places to change — one of them inside a `min()` nobody would think to look at. */
    --newtex-highlight-foot: 14px;
    --newtex-highlight-frame: #0f1317;
    /* Cover, always, and it is a property rather than nothing so a page can overrule it in custom CSS.
       The frame is taller than it is wide by design, and it can be made taller still from the panel, so
       a fitted-whole picture would leave the frame colour standing at the sides: the arch would read as
       a picture with a border on it, and a caption laid over the foot of a swatch floating in a hole is
       describing something nobody is looking at. Covering is the only answer that holds at every ratio. */
    --newtex-highlight-fit: cover;

    /* The floor under the design's column, which is the design's own height at its own width — 492.8 ×
       1.25 — held as a number a page can overrule in custom CSS rather than as a control. It is not a
       control because it is not this widget's business: a page that drops the widget into an Elementor
       column of its own sets the height on that column, and the floor here is only standing in for one
       the page has not bothered to make. See the note at the top of this file. */
    --newtex-highlight-column-min: 616px;

    /* The two transitions of the cross-fade, and how far in the drift starts. */
    --newtex-highlight-fade: 1.4s;
    --newtex-highlight-drift: 7s;
    --newtex-highlight-scale: 1.12;

    /* The caption's arrival, written by the three Motion controls. */
    --newtex-highlight-info-duration: 0.6s;
    --newtex-highlight-info-travel: 18px;
    --newtex-highlight-info-stagger: 70ms;

    /* The two static cards, and how far off the frame they sit. */
    --newtex-highlight-card-bg: #fbfaf6;
    --newtex-highlight-card-fg: #1f252b;
    --newtex-highlight-card-radius: 12px;
    --newtex-highlight-card-offset: -50px;

    /* The room the frame needs *outside* itself, and nothing else on the page can be asked for it.
       Two things leave the design: the ring, which is drawn 22px outside the frame all the way round,
       and each card, which hangs off a side by the offset above. Whichever reaches further out is the
       room the widget's own box has to hold, so the root reserves exactly that much and the design
       never depends on space beside it.

       This is not a nicety, it is what the widget was silently relying on. The parent theme's reset
       carries `body { overflow-x: clip }`, so anything past the page's own edge is gone rather than
       scrollable, and the Elementor canvas is always narrower than the window a published page is
       usually seen in — so a widget whose cards depended on room beside the arch lost the outside of
       its first card in the editor and kept all of it on a wide monitor. The reference never depends
       on that room either: its stage is `justify-self: center` inside a half-width grid column, so the
       arch has air on both sides by construction, and reserving it here is the same arrangement.

       Written as a `max()` of the two because each of them can be turned off from the panel: the ring
       has a switch, and a card offset of zero or a positive number brings both cards inside the frame,
       in which case the room asked for collapses to whichever of the two is still reaching out. */
    --newtex-highlight-ring-inset: 22px;
    --newtex-highlight-overhang: max(
        var(--newtex-highlight-ring-inset),
        calc(0px - var(--newtex-highlight-card-offset))
    );

    /* The design's own accents. */
    --newtex-highlight-gold: #d6a23d;
    --newtex-highlight-cream: #f5f2ea;
    --newtex-highlight-ease: cubic-bezier(0.19, 1, 0.22, 1);
    --newtex-highlight-ease-in: cubic-bezier(0.65, 0, 0.35, 1);

    position: relative;
    /* The ring and the cards are meant to leave the widget's box, so the box must not clip them.
       Elementor hands every widget a wrapper, and the widget's own overflow is what gets in the way.
       They still *leave* it — which is the design — but only as far as the padding below carries
       them, so everything still reaching out is inside the widget and nothing is left hanging on the
       page beside it. */
    overflow: visible;
    /* The row is the root, so the two columns are the root's own two boxes and there is nothing
       between them to be squeezed out of shape. A flex row rather than a grid, and the first column's
       own `width`/`max-width` rather than a `minmax(0, 1fr)` track, because the arch is the one thing in
       here with a width of its own: given a track it would be handed half the page and hold the cap in
       the middle of it, so the pair would be half the page each rather than a 440px stage beside
       something. That is the same reason the reference gets away with a bare `max-width` on its stage —
       it is a grid *item*, and this is a flex *item*, and the two do not resolve a cap the same way. */
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    max-width: 100%;
    margin: 0 auto;
    /* The room the frame needs outside itself, kept inside the widget's own box — see the note on the
       property above. Padding rather than margin on the column because it is the *root's* box that has
       to hold the design, and because it does the frame's arithmetic for free: the frame asks for a
       `100%` of the column, and a percentage is resolved against the content box, so a frame filling the
       widget fills what is left between the two paddings instead of overflowing them. The arch keeps the
       width it was given at every width, and gives up only the room the ring and the cards were already
       using. */
    padding-inline: var(--newtex-highlight-overhang);
    text-align: start;
    /* The design is drawn for a Persian page, and the template writes the same thing on the element for
       the browser to agree with. Both are deliberate: the stylesheet's half covers a widget whose markup
       has been copied out of a cache, and the attribute's half covers a page whose `<html>` has not been
       told it is Persian. Every positional rule below is a logical inset, so this one declaration is what
       decides which side the first card hangs off and which end of the caption the code pill sits at.
       It also decides which end of the row the first column is drawn at, which is why the design is
       written as the *first* column rather than as the left one: a flex row lays its items out from
       the inline start, so `direction: rtl` puts the design at the reading edge and the empty slot at
       the far one — the same way round as an Elementor container of two columns on the same page. */
    direction: rtl;
}

/* ---------- the two columns ---------- */

/* The design's own column: the arch, the cards hanging off it and the dots under it, and nothing else.
   The width control writes `--newtex-highlight-width` on the root, and the number lands here rather than on
   the root because this is the box the frame is meant to fill.

   Which is written as the reference writes its stage — `width: 100%` against a `max-width` — and the
   reference is the reason this is not a fixed basis any more. `flex: 0 1 <a length>` asks the row for a
   number of pixels and only ever gives them back when the row is narrower, so the arch was the same
   size at every width above its own and stood in the middle of whatever it was given; a percentage
   basis behaves the same way, which is why `100%` used to be a panel default that behaved like `440px`
   on a wide screen and like `440px` on a phone. Asking for the whole row and letting the design's number
   cap it is the arrangement that is right at both ends: a column narrower than the cap gets filled
   completely, a wider one gets the design's stage and no more, and the reference's `.stage-arch` says
   exactly this — `width:100%;max-width:440px`, 400px at its 1023 step and 360px at its 767 — so a phone
   is the design's arch filling the column it was put in rather than a second, smaller arch.

   `flex-grow: 0` is what keeps the pair of columns a pair: given the whole row and allowed to grow, the
   arch would take half the page and leave the slot nothing. The cap is what makes the second item
   possible at all, and not `flex-grow` — a flexbox clamps each item's hypothetical size by its own
   `max-width` before it works out how much room is left, so a capped 440px on a 1140px row still leaves
   700px for the slot to grow into. The old `max-width: 100%` goes with the change: it was a second
   ceiling on a box that now has one, and the width it capped is the percentage that resolves against
   the content box.

   The floor is what makes the pair of columns a pair: the arch is free to be made shorter in the panel
   without the column, and therefore the row, closing up around it. It is not on the stage, because a
   taller stage would move the two cards off the arch they belong to — they are positioned as a
   percentage of it, and a stage with air under the picture would send them into that air. */
.newtex-highlight__column {
    flex: 0 1 auto;
    width: 100%;
    max-width: var(--newtex-highlight-width);
    min-width: 0;
    min-height: var(--newtex-highlight-column-min);
}

/* The second column: the half the design is put beside, and the box the page will fill. It is the one
   that grows — the whole of the row the design has not spent, which is what the half beside the arch is
   for — and it carries no `min-height` of its own, which is the whole of the other trick: the row is as
   tall as the design's column and this box is in it, so the pair reads as one arrangement without this
   column having to know what the height is. Two 616s would be two numbers to keep in step; one is
   enough. `min-width: 0` is what keeps a wide paragraph in here from squeezing the arch rather than
   the arch squeezing the paragraph.

   `align-items: flex-start` on the root keeps it top-aligned rather than stretched, so whatever goes in
   here starts on the same line as the arch instead of being centred against a 616px column, and so an
   empty one costs the page nothing at all — which is what an empty half of a layout has to do. */
.newtex-highlight__aside {
    flex: 1 1 0;
    min-width: 0;
}

/* The outline picks the radius, so that a page which never touches the control still gets the shape
   it was given rather than the stylesheet's opinion of it. A picked number arrives as a rule on
   `{{WRAPPER}} .newtex-highlight`, which outranks both of these. */
.newtex-highlight--arch {
    --newtex-highlight-radius: 220px;
}

.newtex-highlight--rounded {
    --newtex-highlight-radius: 28px;
}

.newtex-highlight--square {
    --newtex-highlight-radius: 0px;
}

/* ---------- the stage and the frame ---------- */

.newtex-highlight__stage {
    position: relative;
}

.newtex-highlight__stage-inner {
    position: relative;
    /* The reference frame is 440 by 550 pixels on desktop, 400 by 500 on tablet and
       360 by 360 on mobile. Explicit height keeps the absolute pictures from deciding the
       space reserved for this widget. Width can still shrink inside a narrower container. */
    width: var(--newtex-highlight-width);
    max-width: 100%;
    height: var(--newtex-highlight-height);
    border-radius: var(--newtex-highlight-radius);
    background: var(--newtex-highlight-frame);
    overflow: hidden;
    isolation: isolate;
}

/* Only the arch has a flat foot. Everywhere else the radius is one number all the way round, and
   the `min()` is what stops a hand-set radius of zero from leaving the design's foot behind. */
.newtex-highlight--arch .newtex-highlight__stage-inner {
    border-end-start-radius: min(var(--newtex-highlight-foot), var(--newtex-highlight-radius));
    border-end-end-radius: min(var(--newtex-highlight-foot), var(--newtex-highlight-radius));
}

.newtex-highlight__ring {
    position: absolute;
    inset: -22px;
    border: 1px solid rgba(214, 162, 61, 0.35);
    border-radius: calc(var(--newtex-highlight-radius) + 20px) calc(var(--newtex-highlight-radius) + 20px) 26px 26px;
    pointer-events: none;
}

/* A bead going round the ring, which is the one movement in the widget nobody asked for and the one
   that makes a static border look drawn rather than pasted. It rides the ring's own outline as a
   path, so it needs no geometry of its own and follows whatever radius the ring was given. */
.newtex-highlight__ring::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--newtex-highlight-gold);
    box-shadow: 0 0 14px var(--newtex-highlight-gold);
    offset-path: inset(0 round calc(var(--newtex-highlight-radius) + 20px) calc(var(--newtex-highlight-radius) + 20px) 26px 26px);
    animation: newtex-highlight-orbit 12s linear infinite;
}

@keyframes newtex-highlight-orbit {
    from {
        offset-distance: 0%;
    }
    to {
        offset-distance: 100%;
    }
}

/* ---------- the pictures ---------- */

/* Two classes, and the second one is not decoration. Elementor's own reset carries
       `.elementor img { height: auto; max-width: 100% }`, which is one class and an element — enough to
       outrank a single class of our own. So a one-class rule here lost the `height: 100%` below and the
       picture kept the proportion of the file rather than the height of the frame, which is not visible
       while the frame is short enough for the file to overflow it (the frame clips, so it reads as
       cover) and is a band of frame colour across the arch the moment the frame is made taller. Naming
       the frame as well puts the rule at two classes and takes the height back. */
.newtex-highlight__stage-inner .newtex-highlight__picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: var(--newtex-highlight-fit);
    opacity: 0;
    /* Two transitions on one element, deliberately at two speeds: the fade is how long it takes to
       notice, the drift is how long a picture is on screen for. They cancel each other out of
       nothing — the drift is the same for every picture, so the frame keeps the same slow motion
       whatever is in it. */
    transform: scale(var(--newtex-highlight-scale));
    transition:
        opacity var(--newtex-highlight-fade) var(--newtex-highlight-ease-in),
        transform var(--newtex-highlight-drift) linear;
}

.newtex-highlight__picture.is-active {
    opacity: 1;
    transform: scale(1);
}

/* A shade across the foot of the frame. It is the reason the caption can be white text lying on the
   picture rather than white text on a box of its own: a fabric swatch can be any colour at all, and one
   that happens to be pale would swallow the name and the code without this. It stops fading in at 55%
   because the top of the frame is where the pause button and the ring's bead sit, and neither of them
   needs a darker ground. It is over the pictures and under the caption, and touches nothing. */
.newtex-highlight__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(10, 12, 15, 0.55));
    pointer-events: none;
}

/* ---------- the progress hairline ---------- */

.newtex-highlight__progress {
    position: absolute;
    top: 0;
    inset-inline: 0;
    z-index: 4;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
}

.newtex-highlight__progress i {
    display: block;
    height: 100%;
    background: var(--newtex-highlight-gold);
    /* From the right, because that is where the reading edge of a Persian page is. */
    transform-origin: right;
    transform: scaleX(0);
}

.newtex-highlight.is-running .newtex-highlight__progress i {
    animation: newtex-highlight-progress var(--newtex-highlight-interval, 5000ms) linear forwards;
}

@keyframes newtex-highlight-progress {
    to {
        transform: scaleX(1);
    }
}

/* Hovering holds the picture *and* the hairline, so the two never disagree about how much time is
   left. Without the second half the line would keep filling under a frozen picture. */
.newtex-highlight.is-hovered .newtex-highlight__progress i {
    animation-play-state: paused;
}

/* ---------- the two static cards ---------- */

/* Nothing here is animated by the script, and the bob is the only movement they make. They are
   static because they are about every picture rather than the current one. */
.newtex-highlight__card {
    position: absolute;
    z-index: 3;
    width: max-content;
    max-width: min(46%, 240px);
    margin: 0;
    padding: 10px 14px;
    border-radius: var(--newtex-highlight-card-radius);
    background: var(--newtex-highlight-card-bg);
    color: var(--newtex-highlight-card-fg);
    font-size: 12.5px;
    line-height: 1.6;
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
    animation: newtex-highlight-bob 6s ease-in-out infinite;
}

.newtex-highlight__card b {
    display: block;
    font-size: 14px;
}

.newtex-highlight__card--one {
    top: 18%;
    inset-inline-start: var(--newtex-highlight-card-offset);
}

.newtex-highlight__card--two {
    bottom: 24%;
    inset-inline-end: var(--newtex-highlight-card-offset);
    /* Half a cycle apart, so the pair never rises and falls together. */
    animation-delay: -3s;
}

@keyframes newtex-highlight-bob {
    50% {
        transform: translateY(-8px);
    }
}

/* ---------- the controls over the picture ---------- */

.newtex-highlight__pause,
.newtex-highlight__arrow {
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    color: var(--newtex-highlight-cream);
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background-color 0.3s, border-color 0.3s, transform 0.3s var(--newtex-highlight-ease);
}

.newtex-highlight__pause:hover,
.newtex-highlight__arrow:hover {
    background: rgba(0, 0, 0, 0.45);
    border-color: var(--newtex-highlight-gold);
}

.newtex-highlight__pause {
    position: absolute;
    top: 18px;
    inset-inline-end: 18px;
    z-index: 4;
    width: 32px;
    height: 32px;
    padding: 0;
}

/* Two icons in the one button, chosen by the pressed state, rather than one icon rewritten in
   script — the state is already on the element for anything else to read. */
.newtex-highlight__icon-play {
    display: none;
}

.newtex-highlight__pause[aria-pressed="true"] .newtex-highlight__icon-pause {
    display: none;
}

.newtex-highlight__pause[aria-pressed="true"] .newtex-highlight__icon-play {
    display: block;
}

.newtex-highlight__arrows {
    position: absolute;
    inset-block: 0;
    inset-inline: 14px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* The row is only a place to put the two buttons; it must not be what the pointer lands on. */
    pointer-events: none;
}

.newtex-highlight__arrow {
    width: 36px;
    height: 36px;
    padding: 0;
    pointer-events: auto;
}

/* The two chevrons are drawn as fixed paths, so a row that runs right to left puts "previous" on the
   right while its arrow still points left — a button that says one thing and draws the other. Mirroring
   the glyphs, rather than reordering the row, keeps the two pointing away from each other, which is what
   a pair of arrows is for. */
.newtex-highlight__arrow svg {
    transform: scaleX(-1);
}

.newtex-highlight__arrow:active {
    transform: scale(0.94);
}

/* ---------- the caption, on the picture ---------- */

/* The design's `.hang`: a row across the foot of the arch, the two names at the reading edge and the
   code pill alone at the other end, on the fabric itself.

   It is positioned here rather than in a panel below the frame because that is what the design draws,
   and because a panel costs the picture its height twice over — once by the panel's own, and once
   because the frame stops where the panel begins. What is left is an arch with a caption bolted to the
   bottom of it, which is a different widget from the one the page was drawn with.

   The row is bottom-aligned rather than centred because the two children are not the same height: the
   pill is one line of small type and the names are two, and standing them on a shared bottom edge is the
   only way the pill reads as belonging to the name beside it rather than floating in the middle. The gap
   is the design's 12px, and is what the Gap control in Elementor's panel overwrites.
 */
/* The root is named as well, so that this rule beats the parent theme's reset, which carries
   `a:active, a:hover { color: #336 }` — one class and an element, against one class of ours. A
   single class here lost, and the product's name turned dark navy the moment the pointer went over
   the caption: white text lying on the picture is the design, and it is the one colour in this widget
   that has to survive a hover, because the name is what the pointer went over *for* and recolouring
   it is the page telling the visitor it has not understood what it clicked. The English name and the
   code pill carry colours of their own, so this one declaration is the whole of the correction. */
.newtex-highlight .newtex-highlight__info {
    position: absolute;
    inset-inline: 22px;
    bottom: 22px;
    /* Over the shade, under the pause button and the arrows: the caption is the thing being read, and
       the other two are only reached for deliberately. */
    z-index: 2;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    color: #fff;
    text-decoration: none;
    /* A caption with no href is not a link, and has none of a link's manners. */
}

.newtex-highlight__info.is-static {
    cursor: default;
}

/* The two names as one block, so the row can push the pill to the far end without the Persian name
   and the English one drifting apart: they are one label, written in two scripts.

   No gap between the two lines, which is the design's own arrangement rather than a tidy-up: the
   reference hangs the names in a plain block, the Persian name over the English one, and the leading
   inside each line box is the only space between them. A gap here reads as two separate labels, and
   the design's caption is one product named twice. The column flex is kept anyway — the block still
   has to be a box the row can push the pill away from, and `min-width: 0` is what lets a long Latin
   name break instead of stretching the row. */
.newtex-highlight__names {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.newtex-highlight__code {
    flex: 0 0 auto;
    padding: 3px 12px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.15);
    color: #fff;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums lining-nums;
    /* The code is read left to right even on a Persian page, and is isolated so the digits inside it
       are not reordered by the surrounding direction. */
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
}

.newtex-highlight__name-fa {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
}

.newtex-highlight__name-en {
    color: #c9cdd0;
    font-size: 12.5px;
    direction: ltr;
    /* Its own right edge, written as `end` so it is right here and only here: this is a Latin line
       sitting under a Persian one, and a left-aligned English name under a right-aligned Persian one
       reads as two labels rather than as one. The Alignment control in the panel moves the Persian
       line and not this one, which is the lesser of the two surprises — the other would be a line that
       reflows depending on which script it happened to be written in. */
    text-align: end;
    unicode-bidi: isolate;
}

/* An underline under both names, drawn whether or not the pointer is anywhere near them.
   This is the resting state rather than a hover, and that is the point: the two lines are the one
   thing in the caption that is *about* this product, and a rule that appeared only when the pointer
   arrived made the page read as though the name were a link only when it was being aimed at. Both
   names are underlined together because they are one name in two scripts — underlining the Persian
   line alone left the English line looking like a caption for the link rather than half of it.

   The colour is left to each line's own, so the rule is one declaration rather than two: the Persian
   name underlines white and the English one underlines its own grey, which is what "currentColor" is
   for. `currentColor` is also what keeps this correct for a product with no English name — an empty
   line underlines nothing, and the caption is simply the Persian name underlined. */
.newtex-highlight__name-fa,
.newtex-highlight__name-en {
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 4px;
}

/* The arrival. Written as a keyframe rather than a transition, and replayed by the script, because the
   lines have to come in one after another and a transition can only move one property of one element at
   a time. `both` matters: without it the lines would flicker at their starting offset for the length of
   the delay before each of them began.

   The order is the design's — the Persian name, then the English one under it, then the code pill at the
   other end of the row — and it costs three selectors rather than one because a stagger is a delay on a
   named thing, and the two names are no longer siblings of the pill: they are one block. */
.newtex-highlight__info.is-arriving > *,
.newtex-highlight__info.is-arriving .newtex-highlight__name-en {
    animation: newtex-highlight-arrive var(--newtex-highlight-info-duration) var(--newtex-highlight-ease) both;
}

.newtex-highlight__info.is-arriving .newtex-highlight__name-en {
    animation-delay: var(--newtex-highlight-info-stagger);
}

.newtex-highlight__info.is-arriving > *:nth-child(2) {
    animation-delay: calc(var(--newtex-highlight-info-stagger) * 2);
}

@keyframes newtex-highlight-arrive {
    from {
        opacity: 0;
        transform: translateY(var(--newtex-highlight-info-travel));
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- the dots ---------- */

/* A row of marks and nothing else. The design draws none, and the frame no longer has a panel under it
   for them to sit in, so what is left is the smallest thing that can still be pressed: no surface, no
   border, no caption. A second box here would undo the move of the caption onto the picture, and marks
   are the one thing on screen not worth reading.

   The gap is the ring's, not a round number chosen for looks: the ring is drawn 22px outside the frame
   all the way round, so anything under the arch has to clear 22px before the gold hairline runs under it.
   A row set at the old panel's 14px would have been sitting *on* the ring, with the line crossing it.

   The colour is set rather than inherited, which is the one place in this widget that does not trust the
   section behind it. Inheriting would be the tidier answer, and it is wrong the moment the widget is
   dropped onto a dark section or into a photograph: a cream hairline disappears on both. Gold is the
   design's one accent and it is legible on cream, on ink and on a fabric swatch, so the marks carry it
   and there is nothing else to decide for them.
 */
.newtex-highlight__dots {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 28px;
}

.newtex-highlight__dot {
    position: relative;
    width: 10px;
    height: 10px;
    padding: 0;
    border: 1px solid var(--newtex-highlight-gold);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s var(--newtex-highlight-ease);
}

.newtex-highlight__dot:hover {
    background: rgba(214, 162, 61, 0.35);
}

.newtex-highlight__dot.is-active {
    background: var(--newtex-highlight-gold);
    transform: scale(1.25);
}

/* The mark is ten pixels across, which is below the size a finger can be trusted to hit. The padding
   is invisible and the hit area is not, and it is what a 10px button would have had to grow into had
   this been a control on its own. */
.newtex-highlight__dot::after {
    content: "";
    position: absolute;
    inset: -9px;
}

/* ---------- one product, and no script ---------- */

/* A single product has nothing to switch to, so the controls that only exist to switch are dropped
   from the layout rather than left as decoration. */
.newtex-highlight--single .newtex-highlight__dots,
.newtex-highlight--single .newtex-highlight__arrows,
.newtex-highlight--single .newtex-highlight__progress {
    display: none;
}

/* And the room under the arch goes with them. The column's floor is not a height of its own — it is the
   design's height at the design's width plus the row of dots that sits under the arch, which is why the
   floor is a number rather than a measurement and why the two-product arrangement is 616 tall around a
   550 frame. With the dots gone the floor is a strip of nothing under the only thing the widget draws,
   so a single product gets the frame's own height — the same trade the block at the bottom of this file
   makes at 1023px, and for the same reason.

   Not conditional on anything else: the floor was holding room for the dots rather than for the second
   column, and that second column is top-aligned against the frame anyway (see `align-items` on the root
   and the absence of a `min-height` on the aside), so copy beside the arch has never depended on it. */
.newtex-highlight--single .newtex-highlight__column {
    min-height: 0;
}

/* And with them goes the half of the arrangement that existed to be filled by something. A widget
   twice the width of the only thing it draws, half of it empty, reads as a mistake in the editor long
   before anybody opens the page — and the empty half is not the page's fault, because the slot is
   printed empty: it is the arrangement's own second column taking a share of the row that no copy was
   ever going to fill.

   Which is why this is keyed to the slot being empty rather than to the widget having one product. The
   slot is the page's, not the panel's: it is printed empty by the template precisely so a page *can*
   fill it, and one product beside a paragraph is exactly as ordinary as four beside a paragraph. So the
   widget asks the slot whether it is empty, and only spends its own width down when nothing answered.

   That test is not the single product's any more, and the change was one line for a reason worth
   writing down: the blank half was the same blank half with one fabric in it as with four, so a page
   that had chosen three fabrics and put its copy in its own Elementor column beside the widget was
   left holding a whole empty half that nothing was ever going to fill. Keying it to one product treated
   a symptom — the case where the blank is most obvious — as if it were the cause, which is the shape of
   the arrangement rather than the number of fabrics in it. A page that wants two columns still gets
   them: put something in the slot, which is the template edit the slot is printed empty for.

   The width is then the design's own arithmetic rather than a wrap of its own: the frame's width from
   the control, plus the room the root reserves for the ring and the cards either side of it. Written
   out rather than `fit-content` because the browser cannot measure this arrangement from its own
   contents — a flex item that may shrink contributes only its *minimum* content width to the width of
   the box around it, and the arch is an `aspect-ratio` box with no minimum width at all, so asked to
   wrap itself the widget closed up to four pixels at every width tried. `calc` needs no such measuring,
   so a frame asked for `100%` on a tablet behaves here as it does everywhere else: the root's
   `max-width` clamps the row to the space there is and the arch gives up what it has to.

   The slot is dropped as well as the width spent, and the two are one change rather than two: the root
   is a block, so narrowing it does not stop the empty item inside it from taking the rest of the row —
   it only takes the strip away from the arch and leaves it standing at the far end of the widget, which
   is the same blank space one level up. Hiding it alone is the same story the other way round, which is
   why both declarations sit under one `:has()`.

   From 1024px, because below it the arrangement has already stopped being two columns — the block
   further down drops the slot and centres the design in the line — so there is no second column left to
   stop spending width on, and the rule would only be fighting that one. */
@media (min-width: 1024px) {
    .newtex-highlight:has(.newtex-highlight__aside:empty) {
        width: calc(var(--newtex-highlight-width) + var(--newtex-highlight-overhang) * 2);
    }

    .newtex-highlight:has(.newtex-highlight__aside:empty) .newtex-highlight__aside {
        display: none;
    }
}


/* Motion is the whole of what this widget does, and a visitor who has asked their system to hold
   still has asked for all of it to be still: no drift, no bob, no bead, no caption arriving from
   below. The pictures still cross-fade, because a change with no transition at all reads as a jump
   cut rather than as calm. */
@media (prefers-reduced-motion: reduce) {
    /* Named with the frame as well, for the reason given on the base rule above: the two-class rule is
       what actually paints, so a one-class override here is a note to nobody and the drift a visitor
       asked to have stopped would keep going. */
    .newtex-highlight__stage-inner .newtex-highlight__picture {
        transform: none;
        transition: opacity 0.2s linear;
    }

    .newtex-highlight__ring::before,
    .newtex-highlight__card,
    .newtex-highlight__info.is-arriving > *,
    .newtex-highlight__info.is-arriving .newtex-highlight__name-en {
        animation: none;
    }
}

/* ---------- small screens ---------- */

/* The ring and its orbiting bead stay at every width. The reference drops them below 1024, but the
   moving border is what marks this frame as the featured product, and a phone is where most visitors
   see it. Its 22px inset is still reserved by the root's padding, so it never reaches past the
   widget's own box, and the panel's switch remains the only thing that turns it off. */
/* The reference drops its two float tags at 1199px, well above the tablet step, and it is the only
   reason this widget has a 1199px block of its own: every other number here follows the design's 1023
   and 767, and a card hanging 50px off each side of a frame that is already most of the width is what
   forces the step. Stacked under the frame rather than brought in over the picture, which is what this
   file used to do at 767px — on a frame the width of the screen there is nowhere beside or on it for a
   card to be that is not on top of the caption. The reference drops them, but they carry the fabric's
   photo and spec claims, so a phone visitor gets them under the arch instead.

   Two classes are named on the card for the same reason as everywhere else in this file: the rule that
   paints the card is the two-class one, so a single-class override here would lose to it. */
@media (max-width: 1199px) {
    .newtex-highlight {
        /* The two halves of one change, and the second is the one that is easy to miss. Hiding the
           cards does not by itself give the room back, because that room is a `max()` over the ring's
           inset and the card offset read as *numbers* — nothing in it asks whether anything is still
           actually reaching out. So a card that is `display: none` still costs the row fifty pixels a
           side, the frame is handed 100px less than the width above asks for, and on a 390px phone the
           arch comes out 234px wide inside a 334px row with a hand's width of nothing either side of
           it. Setting the offset to zero alongside the `display` is what collapses the `max()`, and it
           is the same thing the panel does when a page brings the cards inside on purpose. */
        --newtex-highlight-card-offset: 0px;
    }

    /* The cards are not dropped, they are moved: stacked under the frame, one to a row, in the order
       the template prints them. The stage becomes a column so they follow the frame in the flow, and the
       gap between the frame and the first card clears the ring, which is drawn 22px below the frame. */
    .newtex-highlight .newtex-highlight__stage {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .newtex-highlight .newtex-highlight__stage-inner + .newtex-highlight__card {
        margin-top: calc(var(--newtex-highlight-ring-inset) + 14px);
    }

    /* The ring's inset is measured against the stage, and the stage now holds the cards as well, so
       its height is pinned to the frame's own or it would run round the cards too. */
    .newtex-highlight .newtex-highlight__ring {
        bottom: auto;
        height: calc(var(--newtex-highlight-height) + var(--newtex-highlight-ring-inset) * 2);
    }

    /* Two classes for the reason above. In the flow rather than over the frame, the width of the frame
       rather than their own, and still: a bob makes sense for a tag hanging in the air beside the arch,
       not for a row in a list. */
    .newtex-highlight .newtex-highlight__card {
        position: static;
        width: auto;
        max-width: none;
        box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.45);
        animation: none;
    }
}

@media (max-width: 1023px) {
    .newtex-highlight {
        /* The design steps its stage down to 400px here, and this is the number that has to arrive,
           because the panel's Width control cannot be the thing that brings it: Elementor writes a rule
           only for a value a page has actually **saved**, and its `tablet_default` is only what the
           panel shows before that — so an untouched widget emits no tablet rule at all and the desktop
           440px above stands. That is not a panel default to be fixed but a stylesheet default to be
           filled in, which is why the two narrower steps are written here as well as in the panel.

           The precedence is the other way round from what it looks like: a page that *has* saved a
           tablet width gets `{{WRAPPER}} .newtex-highlight` from Elementor, which is this element plus
           the design's own class, and two classes outrank the single class used here. So this is the
           cap an untouched widget fills up to, and a deliberate width still wins over it.

           It is a cap and nothing else, which is what the reference's own `max-width:400px` is: the
           frame asks for the whole column and this is where it stops. Below 1023 there is no second
           column left to share the row with, so a column narrower than 400px is filled edge to edge
           instead of standing in the middle of it with the design's cap either side — which is what a
           frame at a fixed basis was doing on every phone. */
        --newtex-highlight-width: 400px;
        --newtex-highlight-height: 500px;
    }

    /* One column, and the arch centred in it again. Two columns of an arch each are the reason a
       widget is dropped into a page's own column rather than used to build the columns, and at this
       width that page's column is already as narrow as one column wants to be. The row stays a row:
       what changes is that the second box is gone, so the one that is left is centred in the line
       rather than sharing it — which is what the `margin-inline: auto` on the column used to do
       without asking. */
    .newtex-highlight {
        justify-content: center;
    }

    .newtex-highlight__column {
        /* The floor goes with the columns. It is the design's height at the design's width, and at this
           width the frame is a phone wide rather than 492.8px, so keeping it would be a shorter picture
           with a strip of nothing under it — the one thing a min-height is never for. */
        min-height: 0;
    }

    /* The empty column, stacked under the design, would be 616px of nothing followed by whatever the
       page puts in it, so far below the arch that nobody connects the two. It is not hidden because it
       holds anything — it is dropped because an empty half is a layout decision this widget has no way
       to justify once the arrangement has become one column. */
    .newtex-highlight__aside {
        display: none;
    }
}

@media (max-width: 767px) {
    /* Match the reference's 360px mobile frame and its 160px shoulders with a 20px foot.
       Height remains explicit even when a narrow container clamps the width. Elementor's
       responsive controls can override these defaults for a particular page. */
    .newtex-highlight {
        --newtex-highlight-width: 360px;
        --newtex-highlight-height: 360px;
        --newtex-highlight-radius: 160px;
        --newtex-highlight-foot: 20px;
    }

    /* The design's small-screen values: the caption draws in closer to the edge, its Persian name
       steps down a little, and the code pill tightens so the row still fits beside it on a phone. */
    /* The root is named here too, because the rule this one is overriding is a two-class one: a media
       query adds no specificity of its own, so a single class in here would simply lose and the caption
       would keep its wide-screen inset on a phone. */
    .newtex-highlight .newtex-highlight__info {
        inset-inline: 18px;
        bottom: 18px;
        gap: 10px;
    }

    .newtex-highlight__name-fa {
        font-size: 20px;
    }

    .newtex-highlight__code {
        padding: 4px 10px;
        font-size: 11px;
    }

    /* A 32px control is a fingertip rather than a tap on a phone, and the reference grows its own to
       40px at this width. Two classes for the same reason as the caption: the base rule that paints the
       button is the two-class one. */
    .newtex-highlight .newtex-highlight__pause {
        width: 40px;
        height: 40px;
    }
}