/* Titan Graphics 1.0.28 — Jobs B–H layout, type and checkout. */

/* ---- Text pages: 720px reading column centred in the normal site container ---- */
/* 1.0.29: do not shrink .container itself or pin it left. See titan-fix-29.css. */
body.titan-graphics .tg-article {
  max-width: 720px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
body.titan-graphics .tg-article h2,
body.titan-graphics .tg-article h3,
body.titan-graphics .titan-text-page .tg-article h2 {
  font-family: "Bebas Neue", BebasNeue, sans-serif;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  font-weight: 400;
  margin-top: 32px;
}
body.titan-graphics .tg-article > p:first-of-type,
body.titan-graphics .tg-article .titan-lede {
  width: 100%;
  max-width: 720px;
}

/* ---- Spacing: 48px above section headings, 24px under a grid note ---- */
body.titan-graphics .section .section-header,
body.titan-graphics .section > .container > h2,
body.titan-graphics main .section-header {
  margin-top: 0;
  padding-top: 0;
}
body.titan-graphics main .section {
  padding-top: 48px;
  padding-bottom: 48px;
}
body.titan-graphics main .section .section-header h2,
body.titan-graphics main .section > .container > h2 {
  margin-top: 0;
}
body.titan-graphics .titan-grid + p,
body.titan-graphics .titan-grid + .titan-range-note,
body.titan-graphics .titan-grid + .titan-delivery-line,
body.titan-graphics .titan-grid + .titan-footnote,
body.titan-graphics .order-range-email + p,
body.titan-graphics .titan-material-grid + p {
  margin-top: 24px;
}

/* ---- Can't find band: full grid width ---- */
body.titan-graphics .titan-cant-find,
body.titan-graphics .coming-soon-panel.titan-cant-find {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 24px;
  box-sizing: border-box;
  border-radius: 8px;
}
body.titan-graphics .titan-cant-find-wrap {
  width: 100%;
  padding: 0 0 48px;
}
body.titan-graphics .titan-cant-find-wrap .container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* ---- Compact shop-by-type text links on range pages ---- */
body.titan-graphics .titan-type-text-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.titan-graphics .titan-type-text-row a {
  font-family: Barlow, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.4;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: #1C1C1E;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Footer: four columns + logo ---- */
body.titan-graphics .site-footer .footer-grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
body.titan-graphics .site-footer .footer-brand img,
body.titan-graphics .site-footer .footer-logo {
  max-width: 180px;
  height: auto;
}
body.titan-graphics .site-footer .footer-col-title {
  font-family: "Bebas Neue", BebasNeue, sans-serif;
  font-size: 22px;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
  color: inherit;
}
body.titan-graphics .site-footer .footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
body.titan-graphics .site-footer .footer-col a,
body.titan-graphics .site-footer .footer-col p {
  font-family: Barlow, "Segoe UI", sans-serif;
  font-size: 16px;
  display: block;
  width: auto;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 8px;
}
body.titan-graphics .site-footer .footer-col a {
  min-height: 44px;
  min-width: 0;
  display: flex;
  align-items: center;
}
@media (min-width: 768px) {
  body.titan-graphics .site-footer .footer-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  body.titan-graphics .site-footer .footer-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---- Reviews ---- */
body.titan-graphics .section-reviews .quote-text {
  position: relative;
  margin: 0 0 12px 1.1em;
  padding: 0;
  text-align: left;
  font-size: 16px;
  line-height: 1.45;
  quotes: none;
}
body.titan-graphics .section-reviews .quote-text::before {
  content: "“";
  position: absolute;
  left: -0.85em;
  top: 0;
  font-size: 1.4em;
  line-height: 1;
  color: #6B7280;
}
body.titan-graphics .section-reviews .quote-name {
  font-size: 16px !important;
  font-weight: 600;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #1C1C1E;
}
body.titan-graphics .section-reviews .quote-role {
  font-size: 14px !important;
  color: #6B7280 !important;
}
body.titan-graphics .section-reviews .review-logo,
body.titan-graphics .section-reviews .review-logo-banner {
  width: auto !important;
  min-width: 120px !important;
  max-width: 200px !important;
  height: auto !important;
  max-height: 48px !important;
  object-fit: contain;
}

/* ---- Homepage routes ---- */
body.titan-graphics .titan-routes {
  padding-top: 32px;
  padding-bottom: 16px;
}
body.titan-graphics .titan-route-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
body.titan-graphics .titan-route-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 120px;
  padding: 24px;
  border: 1px solid #D4D4D8;
  border-radius: 8px;
  background: #fff;
  color: #1C1C1E;
  text-decoration: none;
}
body.titan-graphics .titan-route-card h2 {
  font-family: "Bebas Neue", BebasNeue, sans-serif;
  font-size: 32px;
  margin: 0 0 8px;
}
body.titan-graphics .titan-route-card p {
  margin: 0;
  font-family: Barlow, "Segoe UI", sans-serif;
  font-size: 16px;
}
@media (min-width: 768px) {
  body.titan-graphics .titan-route-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---- Our Work photo strip ---- */
body.titan-graphics .titan-work-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 768px) {
  body.titan-graphics .titan-work-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
body.titan-graphics .titan-work-strip a,
body.titan-graphics .titan-work-strip figure {
  margin: 0;
  display: block;
  border-radius: 8px;
  overflow: hidden;
}
body.titan-graphics .titan-work-strip img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

/* ---- Sample pack band with photo ---- */
body.titan-graphics .banner-orange .orange-inner {
  display: grid;
  gap: 24px;
  align-items: center;
}
@media (min-width: 768px) {
  body.titan-graphics .banner-orange.has-photo .orange-inner {
    grid-template-columns: 1fr 200px auto;
  }
}
body.titan-graphics .banner-orange .sample-band-photo {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  min-height: 120px;
  background: #EDEDED;
}
body.titan-graphics .banner-orange .sample-band-photo img {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
}

/* ---- Before / after slots ---- */
body.titan-graphics .titan-before-after {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  body.titan-graphics .titan-before-after {
    grid-template-columns: 1fr 1fr;
  }
}
body.titan-graphics .titan-image-slot {
  margin: 0 0 16px;
  min-height: 160px;
  background: #EDEDED;
  border: 1px dashed #A1A1AA;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
body.titan-graphics .titan-image-slot.has-image {
  border-style: solid;
  border-color: #E5E7EB;
  background: #EDEDED;
}
body.titan-graphics .titan-image-slot img {
  width: 100%;
  height: auto;
  display: block;
}
body.titan-graphics .titan-editor-placeholder {
  margin: 12px;
  padding: 12px 16px;
  background: #FEF3C7;
  border: 1px dashed #B45309;
  border-radius: 8px;
  color: #1C1C1E;
  font-family: Barlow, "Segoe UI", sans-serif;
  font-size: 14px;
}
body.titan-graphics .titan-editor-placeholder p { margin: 0 0 6px; }
body.titan-graphics .titan-editor-placeholder p:last-child { margin: 0; }

/* ---- Materials picker and cards ---- */
body.titan-graphics .titan-material-picker {
  margin: 0 0 32px;
  padding: 24px;
  border: 1px solid #D4D4D8;
  border-radius: 8px;
  background: #fff;
}
body.titan-graphics .titan-material-picker legend {
  font-family: "Bebas Neue", BebasNeue, sans-serif;
  font-size: 32px;
}
body.titan-graphics .titan-picker-q { margin: 16px 0; }
body.titan-graphics .titan-picker-q p { margin: 0 0 8px; font-weight: 600; }
body.titan-graphics .titan-picker-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.titan-graphics .titan-picker-opts label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #D4D4D8;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}
body.titan-graphics .titan-picker-opts input { width: 18px; height: 18px; }
body.titan-graphics .titan-picker-result { font-weight: 600; margin-top: 16px; }
body.titan-graphics .titan-material-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0 0 32px;
}
@media (min-width: 768px) {
  body.titan-graphics .titan-material-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
body.titan-graphics .titan-material-card {
  border: 1px solid #D4D4D8;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
body.titan-graphics .titan-material-card.is-picked {
  border-color: #1C1C1E;
  box-shadow: 0 0 0 2px #1C1C1E;
}
body.titan-graphics .titan-material-card-image .titan-image-slot { margin: 0; border-radius: 0; }
body.titan-graphics .titan-material-card-body { padding: 16px; }
body.titan-graphics .titan-material-group-title { margin: 48px 0 16px; font-size: 32px; }

/* ---- How it works steps ---- */
body.titan-graphics .titan-steps {
  display: grid;
  gap: 32px;
}
body.titan-graphics .titan-step {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  body.titan-graphics .titan-step.has-image {
    grid-template-columns: 200px 1fr;
    align-items: start;
  }
}
body.titan-graphics .titan-step > :only-child {
  grid-column: 1 / -1;
  max-width: none;
}
body.titan-graphics .titan-step > :only-child p {
  max-width: 720px;
}
body.titan-graphics .titan-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #1C1C1E;
  color: #fff;
  font-weight: 700;
}

/* ---- Shop by sticker image cards already use machine-style frames ---- */

/* ---- Product template ---- */
body.titan-graphics .titan-product-title {
  font-size: 36px;
  line-height: 1.1;
  margin: 0 0 8px;
}
body.titan-graphics .titan-from-price,
body.titan-graphics .titan-product-from {
  font-size: 28px;
  font-weight: 600;
  color: #1C1C1E;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
body.titan-graphics .titan-no-vat {
  display: inline-block;
  font-family: Barlow, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 8px;
  background: #E5E7EB;
  color: #1C1C1E;
}
body.titan-graphics .titan-product-layout {
  display: grid;
  gap: 24px;
}
@media (min-width: 900px) {
  body.titan-graphics .titan-product-layout {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  body.titan-graphics .titan-product-layout .titan-product-title {
    grid-column: 2;
  }
  body.titan-graphics .titan-product-media { grid-column: 1; grid-row: 1 / span 4; }
}
body.titan-graphics .titan-product-media,
body.titan-graphics .titan-product-gallery {
  background: #EDEDED;
  border-radius: 8px;
  padding: 16px;
}
body.titan-graphics .titan-product-media img,
body.titan-graphics .titan-product-gallery img {
  object-fit: contain;
  width: 100%;
  height: auto;
  background: #EDEDED;
}
body.titan-graphics .titan-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
body.titan-graphics .titan-thumbs button {
  width: 72px;
  height: 72px;
  min-width: 44px;
  min-height: 44px;
  padding: 6px;
  background: #EDEDED;
  border: 1px solid #D4D4D8;
  border-radius: 8px;
  cursor: pointer;
}
body.titan-graphics .titan-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body.titan-graphics .titan-size-btns,
body.titan-graphics .titan-material-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
body.titan-graphics .titan-size-btns label,
body.titan-graphics .titan-material-pick label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #D4D4D8;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
}
body.titan-graphics .titan-qty-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 16px;
}
body.titan-graphics .titan-qty-table th,
body.titan-graphics .titan-qty-table td {
  border: 1px solid #D4D4D8;
  padding: 8px 12px;
  text-align: left;
}
body.titan-graphics .titan-add-full,
body.titan-graphics .titan-product-layout .single_add_to_cart_button,
body.titan-graphics form.cart .single_add_to_cart_button {
  display: block;
  width: 100%;
  min-height: 48px;
  border-radius: 8px;
}
body.titan-graphics .titan-ticks {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
body.titan-graphics .titan-ticks li {
  position: relative;
  padding-left: 28px;
  margin: 6px 0;
  font-size: 16px;
}
body.titan-graphics .titan-ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 16px;
  height: 8px;
  border-left: 2px solid #1C1C1E;
  border-bottom: 2px solid #1C1C1E;
  transform: rotate(-45deg);
}

/* ---- Basket and checkout ---- */
body.titan-graphics.woocommerce-cart .entry-title,
body.titan-graphics.woocommerce-checkout .entry-title,
body.titan-graphics.woocommerce-cart .page-hero h1,
body.titan-graphics.woocommerce-checkout .page-hero h1,
body.titan-graphics .woocommerce-checkout h1,
body.titan-graphics .woocommerce-cart h1,
body.titan-graphics .woocommerce-checkout h2,
body.titan-graphics .woocommerce-cart h2,
body.titan-graphics.woocommerce-cart .page-hero,
body.titan-graphics.woocommerce-checkout .page-hero {
  color: #1C1C1E !important;
}
body.titan-graphics .woocommerce form .form-row input.input-text,
body.titan-graphics .woocommerce form .form-row textarea,
body.titan-graphics .woocommerce form .form-row select,
body.titan-graphics .woocommerce-checkout input,
body.titan-graphics .woocommerce-cart input,
body.titan-graphics .woocommerce-checkout textarea,
body.titan-graphics .woocommerce-cart .input-text {
  font-family: Barlow, "Segoe UI", sans-serif;
  font-size: 16px;
  border: 1px solid #1C1C1E;
  border-radius: 8px;
  min-height: 44px;
  color: #1C1C1E;
  background: #fff;
}
body.titan-graphics .woocommerce-checkout,
body.titan-graphics .woocommerce-cart {
  font-family: Barlow, "Segoe UI", sans-serif;
  font-size: 16px;
  color: #1C1C1E;
}
body.titan-graphics .titan-empty-basket {
  text-align: left;
  padding: 24px 0 48px;
}
body.titan-graphics .titan-empty-basket h1,
body.titan-graphics .titan-empty-basket h2 {
  color: #1C1C1E;
}
body.titan-graphics .titan-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
body.titan-graphics .titan-empty-actions .btn,
body.titan-graphics .titan-checkout-ticks {
  min-height: 44px;
}
body.titan-graphics .titan-checkout-pay {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}
body.titan-graphics .titan-checkout-ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 280px;
}
body.titan-graphics .titan-checkout-ticks li {
  position: relative;
  padding-left: 28px;
  margin: 4px 0;
  font-size: 16px;
  color: #1C1C1E;
}
body.titan-graphics .titan-checkout-ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 16px;
  height: 8px;
  border-left: 2px solid #1C1C1E;
  border-bottom: 2px solid #1C1C1E;
  transform: rotate(-45deg);
}

/* ---- Vinyl lettering: first phone screen shows Price your lettering ---- */
@media (max-width: 767px) {
  body.titan-graphics.page-template-page-custom-vinyl-lettering .page-hero,
  body.titan-graphics .tl-hero,
  body.titan-graphics .vinyl-hero,
  body.titan-graphics main > .page-hero {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  body.titan-graphics .tl-hero-photo img,
  body.titan-graphics .page-template-page-custom-vinyl-lettering .tl-hero-photo {
    max-height: 140px;
    object-fit: cover;
  }
  body.titan-graphics .page-template-page-custom-vinyl-lettering .hero-actions,
  body.titan-graphics .page-template-page-custom-vinyl-lettering a[href="#configure"] {
    position: relative;
    z-index: 2;
  }
}

/* Colour palette: 12 popular, then show all */
body.titan-graphics .tl-pal-grid.tl-pal-popular .tl-sw.is-extra { display: none; }
body.titan-graphics .tl-show-all-colours {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 12px;
  font-size: 16px;
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
  font-family: Barlow, "Segoe UI", sans-serif;
  color: #1C1C1E;
}
body.titan-graphics .tl-order-wrap { margin-top: 12px; }
body.titan-graphics .tl-question-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 8px;
  font-size: 16px;
}

/* ---- Corners 8px already used sitewide; reinforce ---- */
body.titan-graphics .btn,
body.titan-graphics .card-machine,
body.titan-graphics .card-bespoke,
body.titan-graphics .card-spec,
body.titan-graphics .card-quote,
body.titan-graphics input,
body.titan-graphics select,
body.titan-graphics textarea,
body.titan-graphics .titan-cant-find {
  border-radius: 8px;
}

/* ---- Tap targets ---- */
body.titan-graphics .btn,
body.titan-graphics .card-link,
body.titan-graphics .sticky-bar a,
body.titan-graphics .hero-actions a,
body.titan-graphics button,
body.titan-graphics input[type="submit"],
body.titan-graphics input[type="button"],
body.titan-graphics .woocommerce-button,
body.titan-graphics .site-header a {
  min-height: 44px;
}
body.titan-graphics .card-machine .card-link,
body.titan-graphics .card-bespoke .card-link,
body.titan-graphics .card-spec .card-link {
  display: inline-flex;
  align-items: center;
}

/* ---- Range email panel ---- */
body.titan-graphics .order-range-email {
  padding: 24px;
  border: 1px solid #D4D4D8;
  border-radius: 8px;
  background: #fff;
}
body.titan-graphics .order-range-email-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

/* Shop by sticker cards on phones: 2 per row (Job B, already) remains */

/* Hide Inter if a plugin injects it */
body.titan-graphics,
body.titan-graphics button,
body.titan-graphics input,
body.titan-graphics select,
body.titan-graphics textarea,
body.titan-graphics .site-header,
body.titan-graphics .site-footer,
body.titan-graphics .woocommerce-cart,
body.titan-graphics .woocommerce-checkout {
  font-family: Barlow, "Segoe UI", sans-serif;
}

/* Easy 44px tap targets (1.0.28 final check) */
body.titan-graphics .skip-link,
body.titan-graphics a.skip-link { /* leave visually hidden skip links */ }
body.titan-graphics .site-header .nav-toggle,
body.titan-graphics .site-header button,
body.titan-graphics .site-header .menu-item > a,
body.titan-graphics .site-header .menu-item > button,
body.titan-graphics .header-basket,
body.titan-graphics .site-header .basket,
body.titan-graphics .crumbs a,
body.titan-graphics .titan-guide-card a,
body.titan-graphics .site-footer a {
  min-height: 44px;
  min-width: 44px;
}
body.titan-graphics .titan-picker-opts input,
body.titan-graphics .titan-material-pick input {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
body.titan-graphics .titan-picker-opts label,
body.titan-graphics .titan-material-pick label {
  min-height: 44px;
  min-width: 44px;
}