/* ==========================================================================
   buy.css - the price section, the same on the home and on the product page.

   The rendered plugin runs the full width of the section, absolute and
   behind everything, cut off by the right edge of the screen. Its own
   stylesheet (assets/granello-buy/granello-buy.css) draws it; all this does
   is tell it how tall the section is, so it centres itself between the band
   above and the one below rather than in a screenful of its own. Everything
   to read stays in the left half and never runs under it.

   The licence card itself lives in pieces.css. This file is the section
   around it: the head, the column, the spec toggle, and the plugin's place.
   Loaded after the page's own stylesheet on both pages.
   ========================================================================== */
/* ============ Buy, with the instrument beside it ======================
   The rendered plugin runs the full width of the section, absolute and
   behind everything, cut off by the right edge of the screen. Its own
   stylesheet (assets/granello-buy/granello-buy.css) draws it; all this does
   is tell it how tall the section is, so it centres itself between the dark
   band above and the countries below rather than in a screenful of its own.
   Everything to read stays in the left half and never runs under it. */
#buy { position:relative; z-index:1; padding:clamp(3rem,7vh,5rem) 0 clamp(2rem,4vh,3rem); }
/* One screenful: the plugin, the card and the spec toggle together, with
   nothing to scroll for, and the same air above and below by construction.
   The column is three rows, 1fr, the card, 1fr, so the card's centre IS
   the section's centre, which is exactly the line the plugin's render is
   centred on. The head sits at the bottom of the row above and the toggle at
   the top of the row below, and neither drags the card off that line
   whatever they measure. Opening the toggle grows the section; it does not
   move the card. */
/* .buy-more sets max-width:900px and margin:auto further down the file and
   would win over .buy-in > * on source order. */
.buy-specs .buy-more { max-width:none; margin:1.1rem 0 0; }
@media (min-width:1000px) {
  #buy { min-height:100svh; display:grid; align-items:start; padding-block:0; }
  /* one screenful of column, whatever the section ends up measuring */
  .buy-in { display:grid; grid-template-rows:1fr auto 1fr; min-height:100svh; }
  /* Opened, the toggle's body would take both 1fr rows with it: an auto-height
     grid gives every track with the same flex factor the largest of their
     content sizes, so a 600px body made the empty row above it 600px too and
     the section came out at two screens with a void over the title. Open, the
     column just stacks from the top and the section grows by exactly what the
     body measures. */
  .buy-in:has(.buy-more[open]) { grid-template-rows:auto auto auto; align-content:start;
    padding-block:clamp(3rem,7vh,5rem); }
  .buy-head { align-self:end; }
  .buy-specs { align-self:start; }
  /* The two flanks are given the same height and the same gap from the card,
     so the empty space left over at the top of the section and at the bottom
     is the same too. 5rem is the head's own block: its title caps at 2.8rem
     on a line of its own plus the line under it, which never reaches 80px at
     any width this rule applies to, so the floor costs the head nothing and
     buys the toggle the 40px it was short. */
  .buy-head, .buy-specs { min-height:5rem; }
  /* the gap belongs to the flank, not to the toggle inside it: on the grid
     item it counts inside the row, and the row above spends exactly the same
     1.4rem under the head. */
  .buy-specs { margin-top:1.4rem; }
  .buy-specs .buy-more { margin-top:0; }
}
/* #buy in front: granello-buy.css loads after this file and sets its own
   position and height on the same class, so a plain .granello-buy here would
   lose on source order and the block would sit in the flow, a screenful tall,
   pushing the section to 1987px. */
/* 0.63 is not a taste: the render carries its shadow in its own alpha, and the
   block clips. Working it out from the block's own arithmetic, the whole image
   clears the top edge only while the plugin's width stays under 1.128 times the
   block's height, and since the block caps that width at height x 16/9, the
   fraction that holds at every viewport shape is 0.634. Above it the shadow is
   sliced off and the section below looks like it starts with a hard line.
   0.55 pushes it right so it still runs off the edge at the smaller size. */
/* Pinned to the first screenful rather than stretched over the section: the
   block sizes the plugin from its own height, so with inset:0 opening the
   spec toggle grew the section, grew the block, and the plugin ballooned
   with it. One screenful high, anchored at the top, it never moves. */
#buy .granello-buy { position:absolute; top:0; left:0; right:0; z-index:0;
  --granello-buy-altezza:100vh; --granello-buy-altezza:100svh;
  --granello-buy-grande-larghezza:0.63; --granello-buy-grande-bordo:0.55; }
/* On a phone the plugin is whole and centred, which the block does by itself
   but behind the card it only makes both harder to read. So there it comes
   out of the background and sits above the card, as its own band. */
@media (max-width:999px) {
  /* Taller than it is wide, by one pixel, on purpose: the block puts the
     plugin whole and centred only when it reads its own box as a vertical
     one, and then draws it at nine tenths of the width. It used to stop at
     34rem, so on anything wider than a small phone the plugin sat in the
     middle of the screen with a third of it empty on either side. Full
     width, the margins are the same one tenth on every phone and tablet.
     The block is as tall as it is wide and the plugin sits in its upper
     half, so the negative margin below hands the empty lower part back to
     the card instead of leaving it as a gap. */
  #buy .granello-buy { position:relative; inset:auto;
    max-width:none; margin:0 auto -9vw;
    --granello-buy-altezza:calc(100vw + 1px); }
}
.buy-in { position:relative; z-index:1; width:100%;
  max-width:1320px; margin:0 auto; padding:0 clamp(1.5rem,5vw,5rem); }
/* Nothing in the column reaches the plugin: it starts at half the frame. */
@media (min-width:1000px) { .buy-in > * { max-width:min(45%,27rem); } }
@media (max-width:999px)  { .buy-in > * { max-width:34rem; margin-left:auto; margin-right:auto; } }

.buy-head { margin-bottom:1.4rem; }
.buy-head h2 { font-size:clamp(1.9rem,4vw,2.8rem); font-weight:900; letter-spacing:-.03em; line-height:1; }
.buy-head p { margin-top:.9rem; font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:.84rem; font-weight:500; letter-spacing:.01em; color:var(--ink-faint); }


.buy-more { max-width:900px; margin:1.1rem auto 0; border-top:1px solid rgba(154,149,140,.28); }
.buy-more > summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0 .2rem; font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); transition:color .2s var(--ease); }
.buy-more > summary::-webkit-details-marker { display:none; }
.buy-more > summary:hover { color:var(--ink); }
.buy-more > summary svg { width:16px; height:16px; flex-shrink:0; transition:transform .3s var(--ease); }
.buy-more[open] > summary svg { transform:rotate(180deg); }
/* While the close animation runs the element is still technically [open];
   the chevron turns back immediately so the click feels answered. */
.buy-more.is-closing > summary svg { transform:rotate(0deg); }
.bm-body { padding:.6rem 0 .2rem; }
.spec-row { padding:.75rem 0; border-top:1px solid rgba(154,149,140,.28); }
.spec-row:first-child { border-top:none; padding-top:0; }
.spec-k { display:block; font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--tan-text); margin-bottom:.4rem; }
.spec-v { font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.84rem; line-height:1.55; letter-spacing:.01em; color:var(--ink-soft); }
.spec-v a { color:var(--ink); border-bottom:1px solid rgba(154,149,140,.5); text-decoration:none; transition:border-color .2s; }
.spec-v a:hover { border-color:var(--ink); }

@media (max-width:360px) {
  #buy { padding-top: 2rem !important; padding-bottom: 3rem !important; }
}