/* ============================================================================
   TOP 10 — butcher paper cards        proofing preview, 2026-09-09
   ----------------------------------------------------------------------------
   Linked from www/index.php rather than inc/topscripts.php, so the CIPA-preserved
   topscripts.php needs no cache-buster bump. Namespaced .tt-* throughout.

   Type uses only faces the site already loads — Oswald and Roboto, plus Caveat
   Brush, which custom.css already declares via @font-face. No new font request.
   Oswald is condensed, which is what makes a name like "Essential Everyday
   Shredded or Chunk Cheeses" fit a narrow card.

   Deliberately NOT .circle-item-price: bottomscripts.php measures that class and
   rewrites its padding for an 80px circle, which would fight this tag.
   ========================================================================== */

/* Full-bleed band: break out of the centred .container, the way
   boyersfood.com's .topten-section does, while the cards stay on the page
   measure via .tt-inner. body{overflow-x:clip} in layout.css keeps the
   scrollbar from turning this into a horizontal scroll. */
.tt-section {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #efe9dd;
    padding-bottom: 30px;
}
.tt-banner { padding: 14px 0 12px; }
.tt-inner {
    max-width: var(--page-max, 1320px);
    margin: 0 auto;
    padding: 0 22px;
}
.tt-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    padding: 24px 0 4px;
}

.tt-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #f2ece0;
    border-radius: 5px;
    box-shadow: 0 2px 0 #e2d9c8, 0 10px 22px rgba(60, 50, 35, .16);
}
/* inset rule, like the fold line on a wrapped parcel */
.tt-card::after {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid #d5cab4;
    border-radius: 3px;
    pointer-events: none;
}

.tt-photo { position: relative; padding: 11px 11px 0; }
.tt-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 3px;
    background: #fff;
}

/* ---------- the price tag ---------- */
.tt-tag {
    position: absolute;
    left: 6px;
    bottom: -15px;
    z-index: 2;
    display: flex;
    align-items: baseline;
    gap: 1px;
    padding: 7px 13px 7px 25px;
    background: #ad1f34;
    color: #fff;
    border-radius: 4px;
    transform: rotate(-2deg);
    box-shadow: 0 6px 16px rgba(40, 20, 10, .34);
}
/* punched hole for the string */
.tt-tag::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #f2ece0;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45);
}

.tt-cur, .tt-pre {
    font-family: 'Oswald', sans-serif;
    font-size: 19px; font-weight: 600; line-height: 1;
    align-self: flex-start; margin-top: 4px;
}
.tt-lg {
    font-family: 'Oswald', sans-serif;
    font-size: 39px; font-weight: 700; line-height: .88;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.tt-sup {
    font-family: 'Oswald', sans-serif;
    font-size: 19px; font-weight: 700; line-height: 1;
    align-self: flex-start; margin-top: 3px;
}
/* handwritten unit — Caveat Brush is already declared in custom.css */
.tt-sm {
    font-family: 'Caveat Brush', 'Roboto', sans-serif;
    font-size: 15px; line-height: 1;
    margin-left: 5px;
    opacity: .95;
}
/* Image-based offers (offer_img) — e.g. the "Buy 3 Get 3 Free" logo, which is a
   1983x1032 transparent PNG at nearly 2:1. A tag is the wrong container for
   that: it has no fixed aspect and carries its own colour. These get a strip
   across the foot of the photo instead, which fits any aspect ratio and needs
   no punched hole. */
.tt-tag--img {
    left: 11px; right: 11px; bottom: 0;
    transform: none;
    padding: 6px 10px;
    background: rgba(255, 255, 255, .96);
    border-radius: 0 0 3px 3px;
    box-shadow: 0 -3px 10px rgba(40, 20, 10, .16);
    justify-content: center;
}
.tt-tag--img::before { display: none; }
.tt-price-img { display: block; line-height: 0; }
.tt-price-img img { display: block; width: auto; max-width: 100%; max-height: 40px; height: auto; }

/* ---------- body ---------- */
.tt-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    padding: 25px 13px 13px;
}
.tt-name {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.24;
    color: #2c2419;
    margin: 0;
}
.tt-disc {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-style: italic;
    color: #7d7261;
    margin: 0;
}
.tt-actions { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }

.tt-actions .tt-add,
.tt-actions .tt-recipe {
    border: 0;
    border-radius: 7px;
    font-family: 'Roboto', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    padding: 8px 13px;
    line-height: 1.2;
}
.tt-actions .tt-add { background: #2c2419; color: #f2ece0; }
.tt-actions .tt-add:hover, .tt-actions .tt-add:focus { background: #1b1610; color: #fff; }
.tt-actions .tt-recipe { background: #ad1f34; color: #fff; }
.tt-actions .tt-recipe:hover, .tt-actions .tt-recipe:focus { background: #8f1a2b; color: #fff; text-decoration: none; }

.tt-card a:focus-visible, .tt-card button:focus-visible {
    outline: 3px solid #114a96;
    outline-offset: 2px;
}

/* ---------- responsive ---------- */
@media (max-width: 1199px) {
    .tt-grid { grid-template-columns: repeat(4, 1fr); }
    .tt-lg { font-size: 36px; }
}
@media (max-width: 991px) {
    .tt-grid { grid-template-columns: repeat(3, 1fr); gap: 15px; }
}
@media (max-width: 767px) {
    .tt-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 16px 0 4px; }
    .tt-inner { padding: 0 12px; }
    .tt-price-img img { max-height: 30px; }
    .tt-photo { padding: 10px 10px 0; }
    .tt-tag { left: 4px; bottom: -15px; padding: 7px 12px 7px 24px; }
    .tt-lg { font-size: 32px; }
    .tt-cur, .tt-pre, .tt-sup { font-size: 19px; }
    .tt-sm { font-size: 15px; }
    .tt-body { padding: 26px 12px 12px; }
    .tt-name { font-size: 15px; }
}