/* Category and product pages (business cards and every other product). Builds on styles.css tokens and components. */

.tbc { background: #fff4dc; color: #7a5300; border-radius: 4px; padding: 0 5px; font-size: .92em; }


/* Type cards */
.type-card .thumb { aspect-ratio: 4 / 3; }
.type-card .thumb svg { width: 92%; height: 92%; }
.type-card:hover .thumb svg { transform: scale(1.04); }
.type-card .price { margin-top: 8px; color: var(--ink-soft); }
.type-card .price b { color: var(--ink); font-weight: 500; font-size: 18px; }
.type-card .price small { font-size: 13px; }

/* Compare table */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.compare { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 15px; }
.compare th, .compare td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare thead th { background: var(--cream); font-weight: 500; font-size: 16px; }
.compare thead a:hover { color: var(--green); }
.compare tbody th { font-weight: 500; color: var(--ink-soft); width: 18%; }
.compare b { font-weight: 500; }

/* Shop by finish and size */
.shop-by { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.shop-by--single { grid-template-columns: 1fr; }
.shop-by > div { background: var(--cream); border-radius: var(--radius); padding: 44px; min-width: 0; }
.shop-by h2 { font-size: clamp(26px, 2.4vw, 34px); margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.chips a { padding: 10px 20px; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; font-size: 15px; transition: border-color .2s, color .2s; }
.chips a:hover { border-color: var(--green); color: var(--green); }
.sizes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 26px; }
.sizes a { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 16px 16px; display: grid; justify-items: center; align-content: end; text-align: center; transition: border-color .2s; }
.sizes a:hover { border-color: var(--green); }
.sizes .shape { width: 80%; border: 2px solid var(--ink); border-radius: 3px; margin-bottom: 14px; background: var(--sage); }
.sizes strong { font-weight: 500; }
.sizes small { color: var(--ink-soft); font-size: 14px; }

/* Artwork help */
.art-help { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.art-help .service p { margin-bottom: 0; }

/* How it works + FAQs */
.bc-how { align-items: start; }
.bc-how .steps { margin-bottom: 0; }
.faqs h2 { margin-bottom: 20px; }
.faqs details { background: var(--paper); border-radius: var(--radius-sm); margin-bottom: 2px; }
.faqs summary { cursor: pointer; padding: 10px 48px 10px 20px; font-weight: 500; list-style: none; position: relative; }
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after { content: "+"; position: absolute; right: 20px; top: 6px; font-size: 22px; font-weight: 400; }
.faqs details[open] summary::after { content: "\2212"; }
.faqs details p { padding: 0 20px 12px; color: var(--ink-soft); font-size: 15px; }

/* ------------------------------------------------------------------ Product page */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.pdp > div { min-width: 0; }
.gallery { position: sticky; top: 150px; }
.stage { border-radius: var(--radius); aspect-ratio: 4 / 3; display: grid; place-items: center; }
.stage svg { width: 100%; height: 100%; }
.stage img, .type-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.stage { overflow: hidden; }
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.thumbs button { background: var(--cream); border: 2px solid transparent; border-radius: var(--radius-sm); padding: 6px 6px 8px; font-size: 13px; color: var(--ink-soft); }
.thumbs button[aria-pressed="true"] { border-color: var(--green); color: var(--ink); }
.thumbs .thumb-art { display: block; aspect-ratio: 16 / 9; }
.thumbs .thumb-art svg { width: 100%; height: 100%; }
.gallery-note { font-size: 13px; color: var(--ink-soft); margin-top: 10px; }

.config h1 { font-size: clamp(30px, 3.4vw, 44px); margin: 0 0 12px; }
.from-line { margin: 14px 0 26px; color: var(--ink-soft); }
.from-line b { color: var(--ink); font-weight: 500; font-size: 20px; }

.steps-form { display: grid; gap: 14px; }
.step { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 20px; margin: 0; min-width: 0; }
.step legend { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 17px; padding: 0 6px; margin-left: -6px; }
.step .n { width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: var(--on-green); display: grid; place-items: center; font-size: 13px; }

.opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 6px; }
.opts.three { grid-template-columns: repeat(3, 1fr); }
.opt { position: relative; display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; cursor: pointer; transition: border-color .15s, background .15s; line-height: 1.35; }
.opt:hover { border-color: #bdbab2; }
.opt input { accent-color: var(--green); width: 18px; height: 18px; flex: none; margin: 0; }
.opt strong { display: block; font-weight: 500; font-size: 15px; }
.opt strong em { font-style: normal; color: var(--green); font-weight: 500; white-space: nowrap; }
.opt small { display: block; color: var(--ink-soft); font-size: 13px; margin-top: 2px; }
/* (i) button with a tooltip, shown on hover or keyboard focus */
.info { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 7px; padding: 0; vertical-align: 1px; border: 1px solid currentColor; border-radius: 50%; background: none; color: var(--ink-soft); font: italic 600 11px/1 Georgia, serif; cursor: help; }
.info:hover, .info:focus-visible { color: var(--ink); }
.tip { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; padding: 12px 14px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 400; line-height: 1.5; box-shadow: 0 10px 30px rgba(0,0,0,.18); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; pointer-events: none; min-width: 260px; }
.tip b { font-weight: 600; }
.info:hover + .tip, .info:focus-visible + .tip, .info:focus + .tip { opacity: 1; visibility: visible; transform: none; }
.opt small.tbc { display: inline-block; }
.opt:has(input:checked) { border-color: var(--green); background: #f3f7f4; }
.opt:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.opt.off { opacity: .55; cursor: not-allowed; }
.opts.three .opt { align-items: flex-start; }

.fixed { margin-top: 6px; padding: 12px 14px; background: var(--cream); border-radius: var(--radius-sm); font-size: 15px; }
.fixed strong { font-weight: 500; }
.fixed small { color: var(--ink-soft); }
.why { display: block; margin-top: 8px; color: var(--ink-soft); font-size: 13px; }

.orient { flex: none; border: 2px solid var(--ink); border-radius: 2px; background: var(--sage); }
.orient.landscape { width: 30px; height: 19px; }
.orient.portrait { width: 19px; height: 30px; }

.swatch-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.swatch { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px 6px 6px; cursor: pointer; font-size: 14px; }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.swatch:has(input:checked) { border-color: var(--green); background: #f3f7f4; box-shadow: 0 0 0 1px var(--green); }
.swatch:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }

.qty-grid { margin-top: 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.qty-head, .qty-row { display: grid; grid-template-columns: 28px 1fr 1fr 1fr; gap: 8px; align-items: center; padding: 9px 14px; font-size: 15px; }
.qty-head { grid-template-columns: 1fr 1fr 1fr; padding-left: 50px; background: var(--cream); font-size: 13px; color: var(--ink-soft); }
.qty-row { border-top: 1px solid var(--line); cursor: pointer; }
.qty-row:hover { background: #fafaf8; }
.qty-row input { accent-color: var(--green); width: 17px; height: 17px; margin: 0; }
.qty-row span:nth-of-type(2) { font-weight: 500; }
.qty-row span:nth-of-type(3) { color: var(--ink-soft); }
.qty-row:has(input:checked) { background: #f3f7f4; box-shadow: inset 3px 0 0 var(--green); }
.grid-note { font-size: 13px; color: var(--ink-soft); padding: 10px 14px; border-top: 1px solid var(--line); }

/* After-payment page (upload-artwork/): upload with Fix my file beside it. On order pages, the design service note */
.art-have { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 10px; margin-top: 10px; align-items: stretch; }
.art-have .upload { margin-top: 0; justify-content: center; }
.art-need { margin-top: 10px; padding: 12px 14px; background: #f3f7f4; border-radius: var(--radius-sm); font-size: 15px; line-height: 1.4; }
.art-need strong { font-weight: 500; }
.art-need em { font-style: normal; color: var(--green); font-weight: 500; }
.art-need small { display: block; color: var(--ink-soft); font-size: 13px; margin-top: 3px; }
.opt.addon { margin-top: 10px; }
.art-have .opt.addon { margin-top: 0; }
/* Side by side only when the artwork step is wide enough for both; stacked otherwise */
.step[data-step="artwork"] { container-type: inline-size; }
@container (max-width: 400px) { .art-have { grid-template-columns: 1fr; } }
.art-have .opt.addon { align-items: flex-start; }
.art-have .opt.addon input { margin-top: 2px; }
.upload { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding: 14px; border: 1px dashed #c9c6be; border-radius: var(--radius-sm); font-size: 14px; color: var(--ink-soft); }
.upload input { font: inherit; font-size: 14px; max-width: 100%; min-width: 0; }

/* Generic product steps */
.finalising { background: #fff4dc; color: #6b4a00; border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14px; margin: 6px 0 14px; }
.finalising strong { font-weight: 600; }
.step-note { margin-top: 8px; font-size: 13px; color: #7a5300; }
.dims { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.dims label, .qty-input { display: grid; gap: 6px; font-size: 14px; color: var(--ink-soft); }
.qty-input { margin-top: 6px; max-width: 260px; }
.dims input, .qty-input input { font: inherit; color: var(--ink); padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); width: 100%; }
.dims input:focus, .qty-input input:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
/* Price summary: the full breakdown after the last step (.order-box), and a slim bar fixed to the
   bottom of the screen on narrow screens (.mobile-bar) */
.mobile-bar .btn { padding: 10px 18px; font-size: 15px; flex: none; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.order-box { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px 20px; background: var(--cream); scroll-margin: 140px; }
.order-box h2 { font-size: 20px; margin-bottom: 12px; }
.order-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.order-head strong { font-weight: 500; }
.order-head b { font-size: 22px; font-weight: 500; white-space: nowrap; }
.order-lines { margin: 12px 0; display: grid; gap: 3px; color: var(--ink-soft); font-size: 14px; }
.order-lines li::before { content: "\00b7  "; }
.order-sums { margin: 0 0 16px; border-top: 1px solid var(--line); padding-top: 10px; font-size: 14px; display: grid; gap: 4px; }
.order-sums div { display: flex; justify-content: space-between; gap: 16px; }
.order-sums dt { color: var(--ink-soft); }
.order-sums dd { margin: 0; }
.order-sums .order-total { font-size: 16px; font-weight: 500; padding-top: 6px; }
.order-sums .order-total dt { color: var(--ink); }
.order-note { font-size: 14px; color: var(--ink-soft); margin-bottom: 16px; }
.order-box .add { width: 100%; justify-content: center; font-size: 16px; padding: 15px; }

.order-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.order-actions .btn { justify-content: center; }
.mobile-bar { display: none; }
.added { display: flex; gap: 10px; align-items: flex-start; background: #f3f7f4; color: var(--green-dark); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14px; margin-bottom: 10px; }
.added svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }

/* Product tabs */
.pdp-tabs .tabs { justify-content: flex-start; border-bottom: 1px solid var(--line); margin-bottom: 30px; overflow-x: auto; scrollbar-width: none; }
.pdp-tabs .tabs button { font-size: clamp(17px, 1.6vw, 21px); white-space: nowrap; margin-bottom: -1px; }
.tab-panel { max-width: 820px; color: var(--ink-soft); }
.tab-panel p + p { margin-top: 14px; }
.tab-panel .note { margin-top: 18px; font-size: 15px; }
.specs { width: 100%; border-collapse: collapse; font-size: 15px; }
.specs th, .specs td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.specs th { width: 32%; font-weight: 500; color: var(--ink); padding-right: 20px; }
.guide { display: grid; gap: 10px; }
.guide li { display: flex; gap: 12px; align-items: flex-start; }
.guide svg { width: 16px; height: 16px; color: var(--green); flex: none; margin-top: 5px; }
.ship { display: grid; gap: 8px; margin-bottom: 16px; }
.ship li { display: flex; justify-content: space-between; gap: 16px; max-width: 420px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ship strong { color: var(--ink); font-weight: 500; }

.related .range { grid-template-columns: repeat(3, 1fr); }
.related .thumb { aspect-ratio: 4 / 3; }

/* Responsive */
@media (max-width: 1100px) {
  .pdp { gap: 32px; }
  .opts.three { grid-template-columns: 1fr; }
  .opts.three .opt { align-items: center; }
  .shop-by { grid-template-columns: 1fr; }
  .bc-types { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .pdp { grid-template-columns: 1fr; }
  .gallery { position: static; }
  .mobile-bar {
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; height: 64px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px;
    background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(17, 22, 20, .06);
  }
  .bar-price { background: none; border: 0; padding: 0; text-align: left; line-height: 1.2; min-width: 0; }
  .bar-price b { display: block; font-size: 19px; font-weight: 500; }
  .bar-price small { display: block; font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body:has(.mobile-bar) .footer { padding-bottom: 94px; }
  .order-box { scroll-margin: 90px; }
}
@media (max-width: 760px) {
  .shop-by > div { padding: 30px 22px; }
  .art-help { grid-template-columns: 1fr; }
  .opts { grid-template-columns: 1fr; }
  .sizes { gap: 8px; }
  .sizes a { padding: 16px 8px 12px; }
  .related .range { grid-template-columns: 1fr 1fr; }
  .qty-head, .qty-row { padding-left: 12px; padding-right: 12px; font-size: 14px; }
  .qty-head { padding-left: 48px; }
}

/* Flyers */
.range.fly-sizes { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .range.fly-sizes { grid-template-columns: repeat(3, 1fr); } }
.hero-art img { display: block; height: 100%; width: 100%; object-fit: cover; border-radius: 12px; }

/* Artwork guidelines */
.ag-guides{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ag-guide{display:block;border:1px solid rgba(0,0,0,.1);border-radius:12px;padding:26px;color:inherit;text-decoration:none}
.ag-guide:hover{border-color:currentColor}
.ag-guide h3{margin:0 0 8px}
.ag-specs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0;padding:0;list-style:none}
.ag-specs li{background:var(--paper,#fff);border:1px solid rgba(0,0,0,.1);border-radius:12px;padding:22px}
.ag-specs svg{width:40px;height:40px;display:block;margin-bottom:14px}
.ag-specs h3{margin:0 0 6px;font-size:18px}
.ag-specs p{margin:0;font-size:15px}
.ag-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.ag-topics>*{max-width:860px}
.ag-topics ul{list-style:disc;padding-left:20px}
.ag-topics h3{font-size:24px}
.ag-topics .table-scroll{margin-top:12px}
.ag-topics h3{margin-top:24px;margin-bottom:12px}
.ag-topics li{margin-bottom:6px}
.ag-topics table{margin-top:12px}
@media (max-width:900px){.ag-specs{grid-template-columns:1fr 1fr}}


/* Downloadable dieline templates */
.ft-group { font-size: 20px; margin: 36px 0 14px; }
.ft-group:first-of-type { margin-top: 0; }
.ft-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ft-card { min-width: 0; display: grid; gap: 2px; font-size: 14px; color: var(--ink-soft); align-content: start; }
.ft-card strong { color: var(--ink); font-weight: 500; font-size: 16px; margin-top: 8px; }
.ft-thumb { position: relative; display: block; aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.ft-thumb img { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); object-fit: contain; }
.ft-links { color: var(--ink-soft); margin-top: 4px; }
.ft-links a { color: var(--ink); text-decoration: underline; }
.ft-thumb:hover { border-color: var(--ink); }
@media (max-width: 800px) { .ft-grid { grid-template-columns: repeat(2, 1fr); } }

/* How it works on product pages: horizontal steps */
.bc-how .steps { grid-template-columns: repeat(4, 1fr); gap: 24px; }
.bc-how .steps li { grid-template-columns: 1fr; gap: 12px; align-content: start; }
.bc-how .steps li:not(:last-child)::after { top: 22px; bottom: auto; left: 52px; right: -16px; width: auto; height: 1px; }
.bc-how .steps h3 { margin-top: 0; }
@media (max-width: 800px) {
  .bc-how .steps { grid-template-columns: 1fr; }
  .bc-how .steps li { grid-template-columns: 44px 1fr; gap: 20px; }
  .bc-how .steps li:not(:last-child)::after { display: none; }
  .bc-how .steps h3 { margin-top: 8px; }
}

/* Artwork guideline points shown as boxes, matching .ag-specs */
.ag-topics > ul, .ag-topics > ol { max-width: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: ag-step; }
.ag-topics > ul > li, .ag-topics > ol > li { margin: 0; background: var(--paper, #fff); border: 1px solid rgba(0,0,0,.1); border-radius: 12px; padding: 22px; font-size: 15px; }
.ag-topics > ol > li { counter-increment: ag-step; }
.ag-topics > ol > li::before { content: counter(ag-step); display: block; font-size: 18px; font-weight: 500; margin-bottom: 8px; }
main .ag-topics h2, main .ag-topics h3 { margin-top: 48px; margin-bottom: 18px; }
main .ag-topics h2:first-child, main .ag-topics h3:first-child { margin-top: 0; }
main .wrap + .wrap.ag-topics { margin-top: 48px; }
main .ag-topics h3 + p { margin-top: 0; margin-bottom: 18px; }
@media (max-width: 900px) { .ag-topics > ul, .ag-topics > ol { grid-template-columns: 1fr 1fr; } }
.opt-sub { font-weight: 500; margin: 16px 0 8px; }
.step[hidden], .opt-subgroup[hidden], .art-have[hidden], .art-need[hidden], #mobile-bar[hidden] { display: none; }
.order-prompt { color: var(--ink-soft); }
/* Notes under option cards sit on the plain step, so only the quantity table keeps the rule above its note */
.step > .grid-note { border-top: 0; padding: 12px 0 0; }
/* Steps waiting on an earlier choice: title only, greyed out */
.step.is-locked { background: var(--cream); padding: 12px 20px; display: flow-root; cursor: not-allowed; }
.step.is-locked > :not(legend) { display: none; }
.step.is-locked legend { float: left; padding: 0; margin: 0; color: var(--ink-soft); background: transparent; }
.step.is-locked legend .n { background: #8d9490; color: #fff; }
.opt-subgroup > .grid-note { border-top: 0; padding: 0 0 10px; }
ul.grid-note, .opt-subgroup > ul.grid-note, .step > ul.grid-note { list-style: disc; padding-left: 18px; }
legend + .opt-sub { margin-top: 0; }
.opt-single { margin-top: 14px; font-size: 14px; color: var(--ink-soft); }
.opt-empty { color: var(--ink-soft); font-size: 14px; margin-top: 6px; }

/* After-payment page: upload artwork */
.ua { max-width: 760px; }
.ua-item { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px 20px; margin-bottom: 14px; }
.ua-item h2 { font-size: 20px; margin: 0; }
.ua-item > p { margin: 6px 0 0; font-size: 14px; color: var(--ink-soft); }
.ua-item .art-have { margin-top: 14px; }
.ua-item .art-need { margin-top: 14px; }
.ua-foot { border-radius: var(--radius); background: var(--cream); padding: 22px 20px 20px; }
.ua-fee { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; margin: 0 0 4px; }
.ua-gst { font-size: 13px; color: var(--ink-soft); margin: 0 0 14px; }
.ua-foot .btn { width: 100%; justify-content: center; }
.ua-note { font-size: 14px; margin: 12px 0 0; }
.ua-note:empty { display: none; }
.ua-later { font-size: 14px; color: var(--ink-soft); margin: 12px 0 0; }