/* ==========================================================================
   Bird Conservation Nepal — shop and basket
   --------------------------------------------------------------------------
   Seven products, photographed in the office rather than in a studio: five of
   the pictures are square and two are portrait, shot against a wall, a table
   and a piece of cork.

   That is why each product sits whole inside its tile rather than filling it.
   The book covers in the library are a uniform family and can be cropped to a
   common shape without loss; these are not, and in a shop the buyer has to see
   the whole object — cropping the field guide to a square would take the title
   off the cover. The tile is the same size for every product, so the grid is
   still even and every name starts on the same line.

   Plain CSS, no build step:
     $data['page_css'] = array('bcn-page.css', 'bcn-blocks.css', 'bcn-shop.css');
   ========================================================================== */

/* --- The product grid ----------------------------------------------------- */

.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
}

.products--compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.product { display: flex; flex-direction: column; height: 100%; }

.product__link { display: flex; flex-direction: column; }

/* One square tile, filled edge to edge, so every product photograph on the
   page is the same width and the same height and every name starts on the
   same line.

   overflow and min-height are not decoration. In a column flex container a
   flex item's min-height resolves to auto, which is its content's intrinsic
   height — so a 3060x4080 photograph of a water bottle pushed its tile taller
   than the square, and the tiles came out at three different heights. A flex
   item only drops that automatic minimum when its overflow is not visible. */
.product__frame {
    aspect-ratio: 1 / 1;
    /* Never let the tile be squeezed. It is a flex item inside a card that is
       itself stretched to the height of its grid row, and a flex item shrinks
       to make room by default — which took a slice off the bottom of every
       tile in a row whose tallest card had a two-line name. bcn-page.css
       pins .entry__frame the same way for the same reason. */
    flex: 0 0 auto;
    min-height: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 2px;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(29, 39, 35, 0.06);
    transition: box-shadow 0.2s ease-out, transform 0.2s ease-out;
}

.product__link:hover .product__frame {
    box-shadow: 0 6px 18px rgba(29, 39, 35, 0.14);
    transform: translateY(-2px);
}

/* Filled rather than fitted, so the picture is the tile. Anchored to the top
   because two of the seven photographs are portrait — the field guide and the
   water bottle — and it is the top of a book that carries its title. */
.product__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.product__name {
    font-family: var(--display);
    font-size: 1rem;
    font-weight: var(--display-weight);
    line-height: 1.3;
    margin: 0.9rem 0 0;
    color: var(--ink);
    transition: color 0.15s ease-out;
}

.product__link:hover .product__name { color: var(--blue); }

.product__price {
    margin: 0.35rem 0 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

/* Pushed to the foot so the button lands on one line across a row whatever
   length the names above it run to. */
.product__add {
    margin-top: auto;
    align-self: flex-start;
    margin-top: 0.9rem;
    padding: 0.65em 1.3em;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    background: transparent;
    border: 1px solid var(--accent);
    border-radius: 2px;
    transition: background-color 0.18s ease-out, color 0.18s ease-out;
}

.product__add { margin-top: auto; }

.product__add:hover { background: var(--accent); color: #fff; }

/* --- One product ---------------------------------------------------------- */


.page-head__eyebrow a { color: inherit; }
.page-head__eyebrow a:hover { color: var(--blue); }

.title-sheet {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
    max-width: var(--measure);
}

@media (min-width: 620px) {
    .title-sheet { grid-template-columns: 280px minmax(0, 1fr); }
}

.product__frame--large { aspect-ratio: 1 / 1; }

.product__price--large {
    font-family: var(--display);
    font-size: 1.75rem;
    font-weight: var(--display-weight);
    color: var(--ink);
    margin: 0 0 1rem;
}

.product__blurb { margin: 0 0 1.5rem; color: var(--ink-2); }

.title-sheet__action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85em 1.6em;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 2px;
    transition: background-color 0.18s ease-out, color 0.18s ease-out;
}

.title-sheet__action:hover { background: transparent; color: var(--accent); }

.product__note {
    margin: 1.1rem 0 0;
    font-size: 0.8125rem;
    color: var(--ink-3);
    max-width: 34ch;
}

.also {
    max-width: var(--measure);
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    padding-top: 1.75rem;
    border-top: 1px solid var(--rule);
}

.also__title {
    font-family: var(--text);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 1.25rem;
}

/* --- The basket ----------------------------------------------------------- */

/* The table scrolls inside its own box rather than pushing the page sideways
   on a phone. */
.basket { overflow-x: auto; }

.basket__table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.basket__table th,
.basket__table td {
    padding: 1rem 0.85rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--rule);
}

.basket__table thead th {
    font-family: var(--text);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-bottom: 0.7rem;
    border-bottom: 2px solid var(--ink);
}

.basket__table .is-right { text-align: right; }

.basket__thumb { width: 72px; padding-right: 0; }

.basket__thumb img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 2px;
}

.basket__name {
    display: block;
    font-family: var(--display);
    font-size: 1.0625rem;
    line-height: 1.25;
    color: var(--ink);
}

.basket__kind {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.basket__num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Minus, the number, plus — one control, so the two buttons read as belonging
   to the field between them rather than as loose furniture beside it. */
.stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--rule-2);
    border-radius: 2px;
    background: #fff;
    overflow: hidden;
}

.stepper__step {
    width: 2.25rem;
    padding: 0;
    font-family: var(--text);
    font-size: 1.0625rem;
    line-height: 1;
    color: var(--ink-2);
    background: var(--paper-hi);
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease-out, color 0.15s ease-out;
}

.stepper__step:hover:not(:disabled) { background: var(--accent); color: #fff; }

/* Minus goes flat at one rather than disappearing, so the control keeps its
   shape and the reader can see the floor has been reached. */
.stepper__step:disabled { color: var(--rule-2); cursor: default; }

.basket__qty {
    width: 3rem;
    padding: 0.45rem 0.25rem;
    font: inherit;
    text-align: center;
    color: var(--ink);
    background: #fff;
    border: none;
    border-left: 1px solid var(--rule-2);
    border-right: 1px solid var(--rule-2);
    -moz-appearance: textfield;
}

/* The native spinners are redundant now that there are real buttons, and at
   this width they crowd the number. */
.basket__qty::-webkit-outer-spin-button,
.basket__qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.basket__remove {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--alert);
    white-space: nowrap;
    transition: color 0.15s ease-out;
}

.basket__remove:hover { color: var(--alert-dk); text-decoration: underline; }

.basket__table tfoot th {
    font-family: var(--text);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    border-bottom: none;
}

.basket__total {
    font-family: var(--display);
    font-size: 1.25rem;
    color: var(--ink);
    border-bottom: none;
}

.basket__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
}

.basket__continue {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blue);
}

.basket__continue:hover { color: var(--accent); }

.basket__checkout {
    display: inline-flex;
    align-items: center;
    padding: 0.9em 2em;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 2px;
    transition: background-color 0.18s ease-out, color 0.18s ease-out;
}

.basket__checkout:hover { background: transparent; color: var(--accent); }

/* An empty basket is the state a first-time visitor arrives in, so it says
   what the shop holds and offers the way in rather than only reporting the
   emptiness. */
.basket-empty {
    max-width: 46ch;
    padding: clamp(2rem, 5vw, 3.5rem) 0;
}

.basket-empty h2 { font-size: 1.5rem; margin-bottom: 0.75rem; }

.basket-empty p { color: var(--ink-2); margin: 0 0 1.75rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* --- Confirmation dialog -------------------------------------------------- */

/* A <dialog>, so the browser handles the modality, the Escape key and the
   backdrop. Only the look is set here.

   The Remove link underneath still works on its own, so a browser without
   <dialog> simply follows it — the confirmation is an enhancement, not the
   mechanism. */

.modal {
    width: min(28rem, calc(100vw - 2.5rem));
    padding: 0;
    color: var(--ink);
    background: var(--paper-hi);
    border: 1px solid var(--rule-2);
    border-radius: 3px;
    box-shadow: 0 18px 50px rgba(29, 39, 35, 0.28);
}

.modal::backdrop { background: rgba(29, 39, 35, 0.55); }

.modal__inner { padding: clamp(1.5rem, 4vw, 2rem); margin: 0; }

.modal__title {
    font-family: var(--display);
    font-size: 1.375rem;
    font-weight: var(--display-weight);
    margin: 0 0 0.6rem;
}

.modal__body {
    margin: 0 0 1.75rem;
    color: var(--ink-2);
    font-size: 0.9375rem;
}

/* The item's name is the one thing in the sentence the reader has to check,
   so it is set apart from the rest of it. */
#remove-dialog-name { font-weight: 700; color: var(--ink); }

.modal__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

.modal__cancel,
.modal__confirm {
    font-family: var(--text);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.85em 1.6em;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.18s ease-out, color 0.18s ease-out,
                border-color 0.18s ease-out;
}

/* Keeping the item is the safe answer, so it is the quiet one — but still a
   full-size target, not a text link squeezed beside a button. */
.modal__cancel {
    color: var(--ink-2);
    background: transparent;
    border: 1px solid var(--rule-2);
}

.modal__cancel:hover { border-color: var(--ink-3); color: var(--ink); }

.modal__confirm {
    color: #fff;
    background: var(--alert);
    border: 1px solid var(--alert);
}

.modal__confirm:hover { background: var(--alert-dk); border-color: var(--alert-dk); }

/* --- Order summary -------------------------------------------------------- */

/* What is being bought, listed beside the checkout form and again on the
   confirmation. Each line is the item on the left and its money on the right,
   so the amounts form a column that can be added up by eye. */

.summary { list-style: none; margin: 0; padding: 0; }

.summary__line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: 0.875rem;
}

.summary__line:last-child { border-bottom: none; }

.summary__name { color: var(--ink); min-width: 0; }

.summary__qty { color: var(--ink-3); white-space: nowrap; }

.summary__amount {
    color: var(--ink-2);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.summary__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.9rem 0 0;
    padding-top: 0.9rem;
    border-top: 2px solid var(--ink);
    font-family: var(--display);
    font-size: 1.125rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.summary__edit { margin: 1rem 0 0; font-size: 0.8125rem; }
.summary__edit a { color: var(--blue); }

/* On the confirmation there is room for the pictures and a wider measure. */
.summary--wide { max-width: var(--measure); }
.summary--wide .summary__line { padding: 0.9rem 0; font-size: 0.9375rem; }
.summary--wide .summary__name { display: flex; align-items: center; gap: 0.85rem; }

.summary__thumb {
    width: 44px;
    height: 44px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 2px;
    flex: 0 0 auto;
}

.summary__total--wide { max-width: var(--measure); font-size: 1.25rem; }