/*
 * TryyCart guided service layout.
 *
 * This presentation-only layer removes decorative desktop-window chrome and
 * turns the homepage journey into one continuous, professional service guide.
 * Calculators, forms, routes, products and WooCommerce workflows are unchanged.
 */

:root {
  --tc-page: #d5dde7;
  --tc-surface: #e9eef4;
  --tc-sky-soft: #dbe5ef;
  --tc-blue-soft: #d2dfed;
  --tc-orange-soft: #edd9cc;
  --tc-mint-soft: #d3e5df;
  --tc-yellow-soft: #ebe3c8;
  --tc-lavender-soft: #ddd9e9;
  --tc-line: #b8c5d3;
  --tc-shadow-sm: 0 8px 22px rgba(20, 39, 64, 0.12);
  --tc-shadow-md: 0 18px 44px rgba(20, 39, 64, 0.17);
}

html,
body.tryycart-global-theme,
body.tryycart-global-theme .site-root {
  background: var(--tc-page);
}

body .tc-site-chrome.tc-site-chrome .tc-main-header {
  background: rgba(235, 240, 246, 0.98);
  border-bottom-color: #b8c4d1;
}

body .tc-site-chrome.tc-site-chrome .tc-desktop-nav {
  background: #dce4ed;
  border-color: #b8c5d3;
}

body .tc-site-chrome.tc-site-chrome .tc-desktop-nav a:hover,
body .tc-site-chrome.tc-site-chrome .tc-desktop-nav a:focus-visible {
  background: #edf1f5;
}

/* Deeper daylight palette: professional contrast without a heavy dark theme. */
body.tryycart-global-theme .hero {
  background: radial-gradient(
      circle at 8% 13%,
      rgba(204, 107, 50, 0.27),
      transparent 29%
    ),
    radial-gradient(
      circle at 87% 13%,
      rgba(52, 96, 157, 0.28),
      transparent 32%
    ),
    linear-gradient(135deg, #d9d8d7 0%, #d1dae5 52%, #c8d7e5 100%);
}

body.tryycart-global-theme .hero-metrics span,
body.tryycart-global-theme .hero-showcase,
body.tryycart-global-theme .map-card {
  background: rgba(232, 237, 243, 0.94);
  border-color: #adbdce;
}

body.tryycart-global-theme .showcase-stage {
  background: #ccd9e7;
}

body.tryycart-global-theme
  :is(
    .order-hero,
    .courier-hero,
    .shop-hero,
    .hiw-hero,
    .checkout-hero,
    .content-hero,
    .placeholder-hero
  ) {
  background: radial-gradient(
      circle at 86% 12%,
      rgba(49, 91, 151, 0.24),
      transparent 31%
    ),
    linear-gradient(135deg, #d7d8dc, #cfd9e4 58%, #d6d9de) !important;
}

/* Decision headings dominate; supporting labels remain quiet. */
body.tryycart-global-theme .section-title h2,
body.tryycart-global-theme .services-section .section-title h2,
body.tryycart-global-theme .steps-section .section-title h2,
body.tryycart-global-theme .problem-section .section-title h2,
body.tryycart-global-theme .faq-section .section-title h2 {
  font-size: clamp(2.65rem, 4.4vw, 3.65rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
}

body.tryycart-global-theme .section-intro {
  color: #374a62;
  font-size: 1.03rem !important;
  line-height: 1.56 !important;
}

body.tryycart-global-theme
  :is(.eyebrow, .card-kicker, .combine-kicker, .service-art > small) {
  font-size: 0.55rem !important;
  letter-spacing: 0.09em;
}

/* Remove every Mac/desktop-window decoration and inter-panel arrow. */
body.tryycart-global-theme
  :is(.services-section, .shipping-story, .steps-section, .problem-section)
  > .shell::before,
body.tryycart-global-theme
  :is(.services-section, .shipping-story, .steps-section)
  > .shell::after {
  display: none !important;
  content: none !important;
}

/*
 * One continuous service guide. Separate DOM sections remain for accessibility
 * and navigation, but visually form one compound panel with internal dividers.
 */
body.tryycart-global-theme
  :is(.services-section, .shipping-story, .steps-section, .problem-section) {
  border: 0;
  padding: 0 !important;
  background: #cbd4df !important;
}

body.tryycart-global-theme .services-section {
  padding-top: 44px !important;
}

body.tryycart-global-theme .problem-section {
  padding-bottom: 44px !important;
}

body.tryycart-global-theme
  :is(.services-section, .shipping-story, .steps-section, .problem-section)
  > .shell {
  width: min(1180px, calc(100% - 34px));
  border-color: #aebdcc;
  border-radius: 0;
  padding: 30px 26px;
  background: linear-gradient(145deg, #e4e9ef, #dbe2ea);
  box-shadow: none;
}

body.tryycart-global-theme .services-section > .shell {
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -8px 32px rgba(20, 39, 64, 0.13);
}

body.tryycart-global-theme
  :is(.shipping-story, .steps-section, .problem-section)
  > .shell {
  border-top: 0;
  box-shadow: inset 0 1px 0 #b9c6d3;
}

body.tryycart-global-theme .problem-section > .shell {
  border-radius: 0 0 26px 26px;
  box-shadow:
    inset 0 1px 0 #b9c6d3,
    0 18px 36px rgba(20, 39, 64, 0.15);
}

/* Clear guidance lines make each stage understandable without extra reading. */
body.tryycart-global-theme
  :is(.services-section, .steps-section)
  .section-intro {
  max-width: 820px;
  margin: 0 0 17px;
  border-left: 4px solid #b84c18;
  border-radius: 0 12px 12px 0;
  padding: 10px 13px;
  background: rgba(239, 242, 246, 0.72);
}

body.tryycart-global-theme .service-network {
  max-width: 720px;
  margin: 0 auto 14px;
  color: #465970;
}

/* The three service choices keep a framed window effect, without fake chrome. */
body.tryycart-global-theme .service-grid {
  gap: 13px;
}

body.tryycart-global-theme .service-card {
  border: 1px solid #aebdcb;
  border-top-width: 5px;
  border-radius: 17px;
  background: #eef2f6;
  box-shadow:
    0 10px 23px rgba(20, 39, 64, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

body.tryycart-global-theme .service-card:hover {
  box-shadow: 0 15px 30px rgba(20, 39, 64, 0.17);
  transform: translateY(-3px);
}

body.tryycart-global-theme .service-art {
  height: 146px;
}

body.tryycart-global-theme .service-body {
  padding: 14px 16px 15px;
}

body.tryycart-global-theme .service-body h3 {
  font-size: 1.08rem;
}

body.tryycart-global-theme .service-body p {
  min-height: 43px;
  font-size: 0.71rem !important;
  line-height: 1.43 !important;
}

body.tryycart-global-theme .service-body li {
  background: #dbe3eb;
  border-color: #bac7d4;
}

body.tryycart-global-theme .combine-banner {
  margin-top: 12px;
  border-color: #adbdcc;
  padding: 12px 15px;
  background: linear-gradient(130deg, #ddd7d1, #d5dee9 55%, #d2e1dc);
  box-shadow: 0 7px 17px rgba(20, 39, 64, 0.1);
}

body.tryycart-global-theme .combine-banner h3 {
  font-size: 1.04rem;
}

body.tryycart-global-theme .combine-flow > span {
  background: rgba(236, 240, 244, 0.92);
}

/* Preparation images and price check remain one compact decision row. */
body.tryycart-global-theme .shipping-story > .shell {
  display: grid;
  grid-template-columns: 0.72fr 0.72fr 1.56fr;
  gap: 12px;
  padding: 19px 18px;
}

body.tryycart-global-theme .shipping-story .shipping-story-photo,
body.tryycart-global-theme .shipping-story .shipping-story-photo img {
  min-height: 178px;
  height: 178px;
}

body.tryycart-global-theme .shipping-story .shipping-story-photo,
body.tryycart-global-theme .shipping-story .shipping-rate-card {
  border-color: #aebdcb;
  background-color: #e9edf2;
  box-shadow: 0 8px 20px rgba(20, 39, 64, 0.12);
}

body.tryycart-global-theme .shipping-story .shipping-rate-card {
  min-height: 178px;
  background: linear-gradient(145deg, #eaedf1, #dfe4eb 58%, #e6ddd6);
}

body.tryycart-global-theme .home-rate-fields input,
body.tryycart-global-theme .home-rate-fields select,
body.tryycart-global-theme .home-rate-prompt {
  background: #f0f3f6;
  border-color: #aebdcd;
}

/* How It Works keeps the interactive meaning in a shorter, darker canvas. */
body.tryycart-global-theme .steps-section > .shell {
  padding: 30px 26px 24px;
}

body.tryycart-global-theme .steps-section .section-title,
body.tryycart-global-theme .services-section .section-title {
  margin-bottom: 6px;
}

body.tryycart-global-theme .customer-flow {
  margin-top: 9px;
  border-color: #aebdcb;
  background: #e8edf2;
  box-shadow: 0 9px 23px rgba(20, 39, 64, 0.12);
}

body.tryycart-global-theme .flow-canvas {
  min-height: 258px;
  background: radial-gradient(
      circle at 12% 20%,
      rgba(199, 132, 81, 0.27),
      transparent 23%
    ),
    radial-gradient(
      circle at 86% 25%,
      rgba(71, 113, 168, 0.29),
      transparent 25%
    ),
    linear-gradient(180deg, #dce3ea, #d3dde7);
}

body.tryycart-global-theme .flow-customer,
body.tryycart-global-theme .flow-doorstep,
body.tryycart-global-theme .flow-hub,
body.tryycart-global-theme .service-lanes button {
  border-color: #acbac8;
  background: rgba(235, 239, 243, 0.94);
}

body.tryycart-global-theme .flow-summary {
  background: #dce3ea;
  border-top-color: #b2c0ce;
}

/* Why TryyCart finishes the same guide with three short proof statements. */
body.tryycart-global-theme .problem-section > .why-layout {
  padding: 30px 26px 24px;
}

body.tryycart-global-theme .why-intro > p {
  border-left: 4px solid #2f5e9d;
  border-radius: 0 10px 10px 0;
  padding: 8px 11px;
  background: rgba(235, 239, 243, 0.7);
  color: #374a62;
}

body.tryycart-global-theme .problem-section .benefit-grid article {
  border-color: #aebdcb;
  background: #e9edf2;
  box-shadow: 0 7px 18px rgba(20, 39, 64, 0.1);
}

body.tryycart-global-theme .problem-section .benefit-grid article > b {
  background: #d8d4e3;
}

/* Compact homepage FAQ: four essentials, then the complete help-centre link. */
body.tryycart-global-theme .faq-section {
  border-top: 1px solid #b8c5d3;
  padding: 38px 0;
  background: #d2dbe5;
}

body.tryycart-global-theme .faq-section .faq-shell {
  align-items: start;
  gap: 24px;
  border: 1px solid #afbdcb;
  border-radius: 20px;
  padding: 24px;
  background: #e2e8ee;
  box-shadow: 0 12px 29px rgba(20, 39, 64, 0.12);
}

body.tryycart-global-theme .faq-section .section-title {
  margin-bottom: 8px;
}

body.tryycart-global-theme .faq-section .section-title h2 {
  font-size: clamp(2.35rem, 3.8vw, 3.2rem);
}

body.tryycart-global-theme .faq-section .faq-shell > div:first-child > p {
  margin: 8px 0 14px;
  color: #405269;
  font-size: 0.78rem;
  line-height: 1.55;
}

body.tryycart-global-theme .faq-section .accordion article:nth-of-type(n + 5) {
  display: none;
}

body.tryycart-global-theme .faq-section .accordion {
  gap: 7px;
}

body.tryycart-global-theme .faq-section .accordion article {
  border-color: #b2c0ce;
  background: #edf1f5;
  box-shadow: none;
}

body.tryycart-global-theme .faq-section .accordion article button {
  min-height: 45px;
  padding: 9px 12px;
}

body.tryycart-global-theme .faq-section .accordion article button span {
  font-size: 0.72rem;
}

body.tryycart-global-theme .faq-section .accordion article > div p {
  font-size: 0.68rem;
  line-height: 1.45;
}

body.tryycart-global-theme .faq-section .faq-explore {
  min-height: 47px;
  border: 1px solid #9fb1c4;
  border-radius: 12px;
  padding: 9px 12px;
  background: #ced9e5;
  color: #183960;
}

/* Remaining homepage sections follow the deeper neutral canvas. */
body.tryycart-global-theme
  :is(.trending-section, .testimonials, .contact-band, .courier-faq) {
  background: #dde4ec;
}

body.tryycart-global-theme
  :is(.category-window, .product-card, .review-grid article) {
  background: #eaf0f5;
  border-color: #b5c2cf;
}

@media (max-width: 980px) {
  body.tryycart-global-theme .shipping-story > .shell {
    grid-template-columns: 1fr 1fr;
  }

  body.tryycart-global-theme .shipping-story .shipping-rate-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  body.tryycart-global-theme .section-title h2,
  body.tryycart-global-theme .services-section .section-title h2,
  body.tryycart-global-theme .steps-section .section-title h2,
  body.tryycart-global-theme .problem-section .section-title h2,
  body.tryycart-global-theme .faq-section .section-title h2 {
    font-size: clamp(2.1rem, 9vw, 2.65rem);
  }

  body.tryycart-global-theme .services-section {
    padding-top: 24px !important;
  }

  body.tryycart-global-theme .problem-section {
    padding-bottom: 24px !important;
  }

  body.tryycart-global-theme
    :is(.services-section, .shipping-story, .steps-section, .problem-section)
    > .shell {
    width: min(1180px, calc(100% - 22px));
    padding: 22px 13px;
  }

  body.tryycart-global-theme .services-section > .shell {
    border-radius: 20px 20px 0 0;
  }

  body.tryycart-global-theme .problem-section > .shell {
    border-radius: 0 0 20px 20px;
  }

  body.tryycart-global-theme
    :is(.services-section, .steps-section)
    .section-intro {
    font-size: 0.87rem !important;
  }

  body.tryycart-global-theme .service-card {
    grid-template-columns: 108px minmax(0, 1fr);
  }

  body.tryycart-global-theme .service-art {
    min-height: 145px;
  }

  body.tryycart-global-theme .service-body {
    padding: 12px 13px;
  }

  body.tryycart-global-theme .service-body h3 {
    font-size: 1rem;
  }

  body.tryycart-global-theme .combine-banner {
    padding: 11px;
  }

  body.tryycart-global-theme .shipping-story > .shell {
    grid-template-columns: 1fr 1fr;
    padding: 15px 12px;
  }

  body.tryycart-global-theme .shipping-story .shipping-story-photo,
  body.tryycart-global-theme .shipping-story .shipping-story-photo img {
    min-height: 140px;
    height: 140px;
  }

  body.tryycart-global-theme .steps-section > .shell,
  body.tryycart-global-theme .problem-section > .why-layout {
    padding: 22px 13px 18px;
  }

  body.tryycart-global-theme .flow-canvas {
    min-height: 0;
  }

  body.tryycart-global-theme .faq-section {
    padding: 26px 0;
  }

  body.tryycart-global-theme .faq-section .faq-shell {
    gap: 16px;
    padding: 16px;
  }
}

@media (max-width: 500px) {
  body.tryycart-global-theme .service-card {
    grid-template-columns: 90px minmax(0, 1fr);
  }

  body.tryycart-global-theme .service-body p {
    font-size: 0.68rem !important;
  }

  body.tryycart-global-theme .shipping-story .shipping-story-photo,
  body.tryycart-global-theme .shipping-story .shipping-story-photo img {
    min-height: 126px;
    height: 126px;
  }

  body.tryycart-global-theme .faq-section .faq-shell {
    grid-template-columns: 1fr;
  }

  body.tryycart-global-theme .faq-section .faq-shell > div:first-child > p {
    margin-bottom: 10px;
  }
}