/* Rose & Fire — the pieces of the proposal the client actually signed off.
   =======================================================================
   Loaded by BOTH builds. rf-next.css stays preview-only and carries the rest
   of the proposal (palette, photo hero, square corners, typography).

   Signed off 2026-09-05, three things and nothing else:
     1. the size selector          (screenshot: "выбор размера как на превью")
     2. the "or take the set" rows (with the add-ons split off from them)
     3. the benefits band          ("эту секцию также как на превью")
   Plus the bug fixes that are not design: the real logo, and a ghost button
   whose label used to disappear on hover.
   ======================================================================= */

/* tokens the pieces below need that rf-site.css does not declare. Values are
   picked for the CURRENT live palette, not the proposed one. */
:root, .rf-bb {
  --rfsurface: #ffffff;
  --rfctl:     #b9b2a6;
  --rfoos:     #857f76;
  --rfred-ink: #a60d26;
}

/* ======================================================================
   1. THE SIZE SELECTOR
   Two columns on a phone, everything on one screen, nothing to swipe for.
   Each option is a real button with the variant's own photograph on it, and
   no price: the price above updates when you choose, and printing it twice
   was the thing that made the block feel like a spreadsheet.
   ====================================================================== */
.rf-bb__tile .tprice { display: none }

.rf-bb__tile .tpic {
  display: block; width: 46px; height: 46px; margin-bottom: 4px;
  border-radius: 8px; overflow: hidden; background: var(--rfbg); position: relative;
}
.rf-bb__tile .tpic img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 2px;
}
.rf-bb__tile.is-active .tpic { background: rgba(255,255,255,.9) }
.rf-bb__tile.is-oos .tpic { opacity: .45 }
[data-rf-setwrap] .rf-bb__tile .tpic { display: none }

/* a sold-out size, marked the way a shop marks one: faded, with a single line
   drawn across it. No badge, no image, reads at a glance in a row of tiles. */
@media (min-width: 761px) {
  .rf-bb__tile.is-oos { position: relative }
  .rf-bb__tile.is-oos > *:not(.tstate) { opacity: .55 }
  .rf-bb__tile.is-oos::before {
    content: ''; position: absolute; left: 10px; right: 10px; top: 50%;
    height: 1px; background: var(--rfctl); transform: rotate(-9deg); opacity: .7;
    pointer-events: none;
  }
  .rf-bb__tiles--sets .rf-bb__tile.is-oos::before {
    position: static; height: 18px; background: var(--rfsurface); transform: none; opacity: 1;
  }
}

@media (max-width: 760px) {
  .rf-bb__tiles {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px; overflow: visible !important; margin: 0; padding: 0;
  }
  .rf-bb__tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 2px;
    min-height: 108px; padding: 12px 10px;
    border: 1.5px solid var(--rfline); border-radius: 12px;
    background: var(--rfsurface); color: var(--rfink);
    font-size: 15px; font-weight: 600; line-height: 1.2;
    box-shadow: 0 1px 0 rgba(23,21,15,.04);
  }
  .rf-bb__tile b { font-size: 14.5px; font-weight: 600; white-space: normal; display: block }
  .rf-bb__tile .tstate { display: none }
  .rf-bb__tile.is-active {
    border-color: var(--rfink); border-width: 2px; padding: 11px 9px;
    background: var(--rfink); color: #fff; box-shadow: none;
  }
  .rf-bb__tile.is-oos {
    opacity: 1; background: transparent; border-style: dashed;
    color: var(--rfmid); font-weight: 500;
  }
  .rf-bb__tile.is-oos b::after { content: none !important }
  .rf-bb__tile.is-oos::after {
    content: 'Restocking'; display: block; font-size: 10.5px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; opacity: .75;
  }
  [data-rf-setwrap] .rf-bb__tile { min-height: 0; padding: 13px 15px; justify-content: space-between; text-align: left }
  .rf-bb__selector { margin-top: 22px }
}

/* ======================================================================
   2. "OR TAKE THE SET" — the ladder
   Modelled on the buy-more-save-more block, with one difference that matters:
   every reward printed here is real. A struck price shows only when the store
   actually has a discount configured; otherwise the benefit is the free US
   shipping the order genuinely crosses at $250. No invented percentages — a
   code that does not exist gets rejected at Shopify's checkout.
   ====================================================================== */
.rf-bb__sellabel { display: flex; align-items: center; gap: 12px; margin: 24px 0 16px }
.rf-bb__sellabel::before, .rf-bb__sellabel::after {
  content: ''; flex: 1; height: 1px; background: var(--rfline);
}
.rf-bb__sellabel span {
  font-size: 11px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase;
  color: var(--rfink);
}

.rf-bb__tiles--sets { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px }
.rf-bb__tiles--sets .rf-bb__tile {
  position: relative; min-height: 0; padding: 13px 15px 13px 14px;
  display: grid; align-items: center; gap: 1px 12px; text-align: left;
  grid-template-columns: 20px minmax(0,1fr) auto;
  grid-template-areas: "radio name price" "radio qty price" "radio save price";
  border: 1.5px solid var(--rfline); border-radius: 13px; background: var(--rfsurface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rf-bb__tiles--sets .rf-bb__tile:hover { border-color: var(--rfctl) }
.rf-bb__tiles--sets .rf-bb__tile::before {
  content: ''; grid-area: radio; width: 18px; height: 18px; border-radius: 999px;
  border: 1.5px solid var(--rfctl); background: var(--rfsurface); box-sizing: border-box;
}
.rf-bb__tiles--sets .rf-bb__tile.is-active {
  border-color: var(--rfink); border-width: 1.5px; padding: 13px 15px 13px 14px;
  background: var(--rfsurface); color: inherit;
  box-shadow: 0 2px 14px rgba(30,24,17,.09);
}
.rf-bb__tiles--sets .rf-bb__tile.is-active::before {
  border-color: var(--rfink); box-shadow: inset 0 0 0 4px var(--rfsurface);
  background: var(--rfink);
}
.rf-bb__tiles--sets .rf-bb__tile b {
  grid-area: name; font-size: 14.5px; font-weight: 700; line-height: 1.25; white-space: normal;
}
.rf-bb__tiles--sets .rf-bb__tile .tqty {
  grid-area: qty; font-size: 12px; color: var(--rfmid); line-height: 1.35;
}
.rf-bb__tiles--sets .rf-bb__tile .tprice {
  grid-area: price; display: block; font-size: 16px; font-weight: 800; white-space: nowrap;
  text-align: right; color: inherit;
}
.rf-bb__tiles--sets .rf-bb__tile .tprice s {
  display: block; font-size: 12.5px; font-weight: 500; color: var(--rfmid);
}
/* neutral pill by default, green only when the row really does cross $250 */
.rf-bb__tiles--sets .rf-bb__tile .tsave {
  grid-area: save; justify-self: start; margin-top: 5px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: var(--rftint); color: var(--rfmid);
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.rf-bb__tiles--sets .rf-bb__tile.is-ship .tsave { background: #e7f0ea; color: #1d5c3b }

@media (max-width: 760px) {
  .rf-bb__tiles--sets .rf-bb__tile { padding: 12px 13px }
  .rf-bb__tiles--sets .rf-bb__tile b { font-size: 14px }
  .rf-bb__tiles--sets .rf-bb__tile .tprice { display: block; font-size: 15px }
}

/* the add-ons are not set rows and must stop reading as two more of them */
.rf-bb__addons { margin-top: 26px; padding-top: 4px; border-top: 1px solid var(--rfline) }
.rf-bb__addonlabel {
  display: block; margin: 16px 0 10px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--rfmid);
}
@media (max-width: 760px) {
  .rf-bb__addon .rf-bb__addon-sub { display: none }   /* the phone gets name and price */
}

/* ======================================================================
   3. THE BENEFITS BAND
   One card per row: the photograph on the left, the line on the right, and
   the paragraph gone on a phone. The median body was 38 words with a worst
   case of 99 — a wall nobody reads at that width.
   ====================================================================== */
@media (max-width: 760px) {
  .rf-story__grid { grid-template-columns: minmax(0, 1fr) !important; gap: 14px }
  .rf-story__copy span { display: none }
  .rf-story__card {
    display: grid; grid-template-columns: 84px minmax(0, 1fr);
    gap: 13px; align-items: center; padding: 0; background: none; border: 0;
  }
  .rf-story__shot {
    width: 84px; height: 84px; border-radius: 12px; overflow: hidden;
    background: var(--rfsurface); border: 1px solid var(--rfline);
  }
  .rf-story__copy { display: block; text-align: left }
  .rf-story__copy b { font-size: 16px; line-height: 1.25; text-align: left }
}

/* ======================================================================
   4. FIXES THAT ARE NOT DESIGN
   ====================================================================== */
/* the real mark from roseandfire.com, in place of the text stand-in */
.rf-logo { display: block; line-height: 0 }
.rf-logo img { height: 26px; width: auto; display: block }
.rf-ftr__logo img { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: .92 }
@media (max-width: 900px) { .rf-logo img { height: 22px } }

/* the ghost button set its background to currentColor and its colour to the
   dark ink in the same rule, so on hover the label was dark on dark */
.rf-btn--ghost:hover { background: #f6f3ee; color: var(--rfdark); border-color: #f6f3ee }