/* ==========================================================================
   Ring tools - "see it on your hand" and the ring sizer page.
   Carried over from the previous site, where they were built on light tokens.
   The block below maps those token names onto the dark theme, so the rules
   that follow work unchanged: what was ink on paper is now light on black.
   ========================================================================== */

.tryon, .sizer, .sizer-page, [data-sizer] {
  --rj-black: var(--white);
  --rj-white: var(--bg);
  --rj-grey-01: var(--bg-2);
  --rj-grey-07: var(--grey-1);
  --text-primary: var(--text);
  --text-secondary: var(--text-soft);
  --text-muted: var(--text-mute);
  --line-subtle: var(--line);
  --surface-panel: var(--bg-1);
  --font-editorial: var(--font-display);
  --font-arabic: var(--font-body-ar);
  --leading-relaxed: 1.7;
  --text-xs: var(--fs-xs);
  --text-sm: var(--fs-sm);
  --text-base: var(--fs-base);
  --text-lg: var(--fs-lg);
  --text-xl: var(--fs-xl);
  --space-3xs: .25rem;
  --space-2xs: .5rem;
  --space-xs: .75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
}

/* ==========================================================================
   Rami Jewels - see it on your hand

   The panel under the gallery on a product page: a photograph of a hand with
   the ring drawn over it.
   ========================================================================== */

.tryon {
    margin-block-start: var(--space-md);
    border: 1px solid var(--line-subtle);
    background: var(--rj-white);
}

.tryon[hidden] { display: none; }

.tryon__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2xs) var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-block-end: 1px solid var(--line-subtle);
}

.tryon__title {
    margin: 0;
    font-family: var(--font-editorial);
    font-size: var(--text-base);
    font-weight: 400;
}

html[lang="ar"] .tryon__title { font-family: var(--font-arabic); }

/* The promise that the picture stays here. Said quietly, but said. */
.tryon__private {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
}

/* --- The stage ----------------------------------------------------------- */

.tryon__stage {
    position: relative;
    display: grid;
    place-items: center;
    min-block-size: 18rem;
    background: var(--rj-grey-01);
    overflow: hidden;
}

.tryon__stage.is-loaded { background: var(--rj-black); }

.tryon__photo,
.tryon__video {
    display: block;
    inline-size: 100%;
    block-size: auto;
    max-block-size: 70svh;
    object-fit: contain;
}

.tryon__photo[hidden],
.tryon__video[hidden] { display: none; }

/* The ring sits over the picture and takes the pointer, because dragging it is
   the whole interaction. touch-action is what stops a drag scrolling the page
   out from under the finger on a phone. */
.tryon__canvas {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    cursor: grab;
    touch-action: none;
}

.tryon__canvas:active { cursor: grabbing; }

.tryon__canvas:focus-visible {
    outline: 2px solid var(--rj-black);
    outline-offset: -2px;
}

/* Shown until there is a picture. Not a placeholder image - an instruction. */
.tryon__empty {
    position: absolute;
    inset-inline: var(--space-md);
    margin: 0;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.is-loaded .tryon__empty { display: none; }

/* --- Controls ------------------------------------------------------------ */

.tryon__controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
}

.tryon__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs) var(--space-sm);
}

.tryon__readout {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
}

.tryon__field {
    display: flex;
    flex: 1 1 14rem;
    flex-direction: column;
    gap: var(--space-3xs);
}

.tryon__label {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
}

.tryon__range {
    inline-size: 100%;
    accent-color: var(--rj-black);
}

/* The file input is replaced by its own label, because the browser's button
   cannot be styled and reads "Choose file" in the browser's language, not the
   page's. */
.tryon__file {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.tryon__file:focus-visible + .btn { outline: 2px solid var(--rj-black); outline-offset: 2px; }

.tryon__message {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--rj-black);
}

.tryon__message[hidden] { display: none; }

.tryon__note {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
}

/* --- The ring beside the finger size ------------------------------------- */

/* A small drawn ring next to the size slider, which grows and shrinks as the
   size changes. Not life size unless the visitor has calibrated the screen in
   the ring sizer - the note under it says which. */
.sizeview {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-block-start: var(--space-xs);
}

/* The canvas is sized by the script, from the scale it is drawing at - a
   fixed box here would squeeze a life-size ring back down to not being one. */
.sizeview__canvas { flex: 0 0 auto; }

.sizeview__facts {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.sizeview__mm {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

@media (max-width: 30rem) {
    .tryon__controls { padding: var(--space-sm); }
}

/* The browser hides [hidden] by setting display: none, and .btn sets a display
   of its own - which wins, so every button written hidden was on screen. The
   camera's shutter button in particular sat there before there was a camera to
   shoot with. This is the one place a display declaration has to be forced. */
.tryon [hidden],
.tryon__open[hidden] { display: none !important; }

/* --- Measuring the screen ------------------------------------------------ */

.sizeview {
    flex-wrap: wrap;
    align-items: flex-start;
}

.sizeview__calibrate {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.sizeview__calibrate:hover { color: var(--text-primary); }
.sizeview__calibrate[hidden] { display: none; }

/* Takes the full width of the row: a bank card is wider than the column the
   ring sits in, and it has to be drawn at its real width to be any use. */
.sizeview__card {
    flex: 1 0 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin-block-start: var(--space-xs);
    padding: var(--space-sm);
    border: 1px solid var(--line-subtle);
    background: var(--rj-grey-01);
}

.sizeview__card[hidden] { display: none; }

.sizeview__cardhelp {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

/* The card itself. A rounded rectangle with a stripe where the magnetic strip
   would be, so it is obvious which way round to hold the real one. */
.sizeview__outline {
    position: relative;
    border: 1px solid var(--rj-black);
    border-radius: 0.55rem;
    background: var(--rj-white);
    max-inline-size: 100%;
}

.sizeview__outline::after {
    content: "";
    position: absolute;
    inset-inline: 6%;
    inset-block-start: 18%;
    block-size: 18%;
    background: var(--rj-grey-07, #2a2a2a);
    opacity: 0.16;
}

.sizeview .sizeview__range {
    inline-size: 100%;
    accent-color: var(--rj-black);
}

/* ==========================================================================
   Rami Jewels - ring sizer

   Three tools on one page. Two of them have to be physically accurate, which
   makes this the one stylesheet where a millimetre means a millimetre: the
   printed strip is laid out in mm so the printer reproduces it at life size,
   and the on-screen circles are sized by script from the visitor's own
   calibration, because CSS millimetres assume 96dpi and screens do not.
   ========================================================================== */

.sizer__step {
    margin-block-start: var(--space-xl);
    padding-block-start: var(--space-lg);
    border-block-start: 1px solid var(--line-subtle);
}

.sizer__step-title {
    font-size: var(--text-lg);
    margin-block-end: var(--space-2xs);
}

.sizer__hint {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin-block-end: var(--space-md);
}

.sizer__done {
    margin-block-start: var(--space-sm);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* --- The card outline ---------------------------------------------------- */

/* Sized entirely by script: any width here would be a guess at the visitor's
   screen, which is the one thing this control exists to stop guessing at. */
.card-outline {
    position: relative;
    margin-block-end: var(--space-md);
    border: 2px solid var(--rj-black);
    border-radius: 0.75rem;
    background: var(--surface-panel);
}

/* The chip is only there to make the outline read as a card at a glance. */
.card-outline__chip {
    position: absolute;
    inset-block-start: 22%;
    inset-inline-start: 10%;
    inline-size: 14%;
    block-size: 22%;
    border: 1px solid var(--line-strong);
    border-radius: 0.2rem;
}

.sizer__slider {
    display: grid;
    gap: var(--space-2xs);
    max-inline-size: 26rem;
}

.sizer__slider-label {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
}

.sizer__slider input { inline-size: 100%; }

.linklike {
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* --- The circles --------------------------------------------------------- */

.rings {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ring {
    display: grid;
    justify-items: center;
    gap: var(--space-3xs);
}

/* A ring of paper the visitor lays a real ring on top of. Black on white with
   nothing inside it: any fill would hide the moment the band's inside edge
   lines up, which is the whole measurement. */
.ring__circle {
    display: block;
    border: 1px solid var(--rj-black);
    border-radius: 50%;
    background: var(--rj-white);
}

.ring__label {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* --- The printed strip --------------------------------------------------- */

/* Real millimetres. On screen these are the browser's idea of a millimetre and
   only roughly right, which is why the page tells the visitor to check the
   100mm line before cutting - on paper, from a printer at 100%, they are exact. */
.check-rule {
    margin-block: var(--space-lg) var(--space-2xs);
}

.check-rule__line {
    display: block;
    inline-size: 100mm;
    max-inline-size: 100%;
    block-size: 2px;
    background: var(--rj-black);
}

.check-rule__caption {
    display: block;
    margin-block-start: var(--space-3xs);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.strip {
    position: relative;
    block-size: 18mm;
    margin-block: var(--space-lg);
    /* Wide enough for the largest circumference on the chart plus the tail the
       visitor holds. It scrolls on a narrow screen rather than being squashed,
       because a squashed strip is a wrong strip. */
    inline-size: 80mm;
    max-inline-size: 100%;
    border: 1px solid var(--rj-black);
    overflow-x: auto;
}

.strip__mark {
    position: absolute;
    inset-block: 0;
    inline-size: 1px;
    background: var(--rj-black);
}

.strip__label {
    position: absolute;
    inset-block-start: 1mm;
    inset-inline-start: 1mm;
    font-size: 2.5mm;
    line-height: 1;
    white-space: nowrap;
}

.sizer__chart { margin-block-start: var(--space-lg); }

/* --- On paper ------------------------------------------------------------
   Everything that is not the strip and its ruler is furniture. The page is
   printed to be cut up, so it prints as little as possible.
   ------------------------------------------------------------------------ */

@media print {
    .site-header,
    .site-footer,
    .announce,
    .conversion-bar,
    .no-print,
    .sizer:not(.sizer--print),
    .section--tight:not(.sizer--print) { display: none !important; }

    .strip {
        /* The scrollbar is a screen affordance; on paper it would clip the
           strip at whatever the screen happened to show. */
        overflow: visible;
        inline-size: 80mm;
    }

    /* Print backgrounds off by default would lose every mark on the strip. */
    .strip__mark,
    .check-rule__line {
        background: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}