/* =============================================================================
	NO surPRICE theme — main stylesheet
	Design tokens echo the plugin's account-area cards (soft borders, 12px radius).
	============================================================================= */

:root {
  /* Brand palette from the NO surPRICE logo: indigo + cyan. */
  --brand: #4d52a4;
  --brand-dark: #3c4088;
  --accent: #28bdd6;
  --accent-dark: #1fa6bd;
  --ink: #1f2150;
  --muted: #5b6470;
  --line: #e6e8eb;
  --line-soft: #f0f1f4;
  --surface: #ffffff;
  --surface-alt: #f5f6fb;
  --header-bg: rgba(255, 255, 255, 0.92);
  --success: #1a7f37;
  --warning: #bd8600;
  --danger: #b32d2e;

  /* Signature gradient (the heartbeat line in the logo). */
  --gradient-brand: linear-gradient(90deg, #4d52a4 0%, #28bdd6 100%);
  --gradient-brand-soft: linear-gradient(135deg, #eef0fb 0%, #e6f7fb 100%);

  --link: var(--accent-dark);

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(31, 33, 80, 0.05);
  --shadow-md: 0 12px 30px rgba(31, 33, 80, 0.12);
  --shadow-brand: 0 10px 24px rgba(77, 82, 164, 0.28);
  --container: 1140px;
  --gap: 24px;

  --font:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
    sans-serif;

  color-scheme: light;
}

/* =============================================================================
	Dark theme
	The brand indigo→cyan gradient is kept; only the surfaces, text and lines flip.
	Applied when the visitor chose "dark", or follows the OS in "auto"/unset mode
	(a visitor who explicitly chose "light" always stays light). The same token
	overrides are repeated for the explicit and the media-query cases on purpose —
	CSS can't share a declaration block across a media boundary.
	============================================================================= */
html[data-theme='dark'] {
  color-scheme: dark;
  --ink: #e7e9f5;
  --muted: #9aa3b8;
  --line: #2c2f4d;
  --line-soft: #23263c;
  --surface: #1a1d36;
  --surface-alt: #232746;
  --header-bg: rgba(18, 20, 38, 0.9);
  --gradient-brand-soft: linear-gradient(135deg, #20233f 0%, #15303a 100%);
  --link: #5bd0e6;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.55);
  --shadow-brand: 0 12px 28px rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
  html[data-theme='auto'],
  html:not([data-theme]) {
    color-scheme: dark;
    --ink: #e7e9f5;
    --muted: #9aa3b8;
    --line: #2c2f4d;
    --line-soft: #23263c;
    --surface: #1a1d36;
    --surface-alt: #232746;
    --header-bg: rgba(18, 20, 38, 0.9);
    --gradient-brand-soft: linear-gradient(135deg, #20233f 0%, #15303a 100%);
    --link: #5bd0e6;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.55);
    --shadow-brand: 0 12px 28px rgba(0, 0, 0, 0.6);
  }
}

/* --- Reset-ish ------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3,
h4 {
  line-height: 1.25;
  color: var(--ink);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

.screen-reader-text {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: #fff;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
  top: 0;
}

/* --- Buttons --------------------------------------------------------------- */
.button,
button,
input[type='submit'],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  display: inline-block;
  padding: 11px 20px;
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
}

.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  filter: brightness(1.05);
  color: #fff;
  text-decoration: none;
}

.button--lg {
  padding: 15px 32px;
  font-size: 1.05rem;
}

/* Primary CTA + WooCommerce add-to-cart / checkout: signature gradient. */
.button--primary,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce ul.products li.product a.button.add_to_cart_button,
.woocommerce div.product form.cart .button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order {
  background: var(--gradient-brand);
  border: 0;
  box-shadow: var(--shadow-brand);
}

.button--primary:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce ul.products li.product a.button.add_to_cart_button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #place_order:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-brand);
  filter: brightness(1.06);
}

/* --- Form controls --------------------------------------------------------- */
input[type='text'],
input[type='email'],
input[type='url'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='number'],
input[type='date'],
textarea,
select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .quantity input.qty {
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

textarea {
  min-height: 140px;
}

/* Native selects: same height as inputs + a custom brand chevron. */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  min-width: 180px;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234d52a4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(77, 82, 164, 0.18);
}

input::placeholder,
textarea::placeholder {
  color: #9aa0ad;
}

/* Custom radios & checkboxes in brand colours. */
input[type='radio'],
input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0 8px 0 0;
  padding: 0;
  vertical-align: -4px;
  border: 2px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

input[type='radio'] {
  border-radius: 50%;
}

input[type='checkbox'] {
  border-radius: 6px;
}

input[type='radio']:hover,
input[type='checkbox']:hover {
  border-color: var(--brand);
}

input[type='radio']:checked,
input[type='checkbox']:checked {
  border-color: var(--brand);
  background: var(--gradient-brand);
}

/* Radio: inner dot. */
input[type='radio']:checked {
  box-shadow: inset 0 0 0 4px #fff;
}

/* Checkbox: white tick. */
input[type='checkbox']:checked {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"),
    var(--gradient-brand);
  background-repeat: no-repeat;
  background-position: center;
}

input[type='radio']:focus-visible,
input[type='checkbox']:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(77, 82, 164, 0.25);
}

input[type='radio']:checked:focus-visible {
  box-shadow:
    inset 0 0 0 4px #fff,
    0 0 0 3px rgba(77, 82, 164, 0.25);
}

/* --- Header ---------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
  border-top: 3px solid transparent;
  border-image: var(--gradient-brand) 1;
  transition: box-shadow 0.2s ease;
}

.site-header.is-scrolled {
  box-shadow: var(--shadow);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: 64px;
}

.site-branding .site-title {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ink);
}

.site-branding img {
  max-height: 40px;
  width: auto;
}

.main-navigation {
  margin-left: auto;
}

.main-navigation ul {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-navigation a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-weight: 500;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
  background: var(--surface-alt);
  color: var(--brand);
  text-decoration: none;
}

.main-navigation .current-menu-item > a {
  box-shadow: inset 0 -2px 0 var(--accent);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.header-account {
  font-weight: 600;
  color: var(--ink);
  /* "Log in / Register" is longer than "Log in": keep it on one line and let it
     shrink rather than wrap into the cart icon. */
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  /* On a narrow header the wording gives way to the icons beside it. */
  .header-account {
    font-size: 0.9rem;
  }
}

/* --- Language switcher ----------------------------------------------------- */
.lang-switcher {
  position: relative;
}

.lang-switcher__toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.lang-switcher__toggle::-webkit-details-marker {
  display: none;
}

.lang-switcher__toggle:hover {
  border-color: var(--brand);
}

.lang-switcher__caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.2s ease;
}

.lang-switcher[open] .lang-switcher__caret {
  transform: rotate(180deg);
}

.lang-switcher__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 150px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.lang-switcher__item {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-weight: 500;
}

.lang-switcher__item:hover {
  background: var(--surface-alt);
  text-decoration: none;
}

.lang-switcher__item.is-current {
  color: var(--brand);
  font-weight: 700;
}

.nosurprice-cart-link {
  position: relative;
  font-size: 1.2rem;
  color: var(--ink);
}

.nosurprice-cart-count {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.menu-toggle {
  display: none;
}

/* --- Layout ---------------------------------------------------------------- */
.site-main {
  padding-block: 40px;
}

.container.has-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px;
  align-items: start;
}

.content-area {
  min-width: 0;
}

.widget-area .widget,
.footer-column .widget {
  margin-bottom: 28px;
}

.widget-title {
  font-size: 1rem;
  margin-bottom: 12px;
}

/* --- Blog ------------------------------------------------------------------ */
.posts-list {
  display: grid;
  gap: 28px;
}

.entry--card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.entry--card .entry-thumbnail img {
  border-radius: var(--radius-sm);
  object-fit: cover;
  width: 100%;
}

.entry-title {
  margin: 0 0 8px;
  font-size: 1.25rem;
}

.entry-meta {
  color: var(--muted);
  font-size: 0.85rem;
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
}

.read-more {
  font-weight: 600;
}

.entry--single {
  max-width: 760px;
}

.entry--single .entry-thumbnail img {
  border-radius: var(--radius);
  width: 100%;
}

.page-header {
  margin-bottom: 28px;
}

.page-title {
  font-size: 2rem;
  margin: 0;
}

/* --- Front page ------------------------------------------------------------ */
.front-page {
  padding-block: 0;
}

/* On the front page the marketing sections (and the final CTA band) already
	supply their own spacing, so drop the footer's 64px top gap that otherwise
	shows as an ugly empty white strip — especially when the page has no body
	content. */
body.home .site-footer {
  margin-top: 0;
}

/* Static page content placed under the marketing blocks (only rendered when the
	front page actually has body content) gets its own breathing room. */
.front-page__content {
  padding-block: 56px;
}

.hero {
  position: relative;
  background: var(--gradient-brand-soft);
  border-bottom: 1px solid var(--line);
  padding-block: 88px;
  overflow: hidden;
}

/* Soft cyan glow echoing the logo's pulse, top-right. */
.hero::after {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 380px;
  height: 380px;
  background: radial-gradient(
    circle,
    rgba(40, 189, 214, 0.22),
    transparent 70%
  );
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
}

.hero__eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(40, 189, 214, 0.14);
  color: var(--brand);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero__title {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Gradient-filled emphasis word(s): wrap in <span class="grad"> if desired. */
.hero__title .grad,
.section-title .grad {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__subtitle {
  font-size: 1.2rem;
  color: var(--muted);
  max-width: 640px;
  margin: 0 0 28px;
}

.features {
  padding-block: 64px;
}

.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.feature-card {
  position: relative;
  padding: 30px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.feature-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--gradient-brand);
}

.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: var(--gradient-brand-soft);
  font-size: 1.6rem;
}

.feature-card__title {
  font-size: 1.15rem;
  margin: 0 0 8px;
}

.feature-card__text {
  color: var(--muted);
  margin: 0;
}

.home-plans {
  padding-block: 64px;
  background: var(--surface-alt);
}

.section-title {
  font-size: 1.75rem;
  text-align: center;
  margin: 0 0 36px;
}

.section-title::after {
  content: '';
  display: block;
  width: 64px;
  height: 4px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: var(--gradient-brand);
}

.home-plans__cta {
  text-align: center;
  margin-top: 32px;
}

.home-plans__lead {
  max-width: 62ch;
  margin: -16px auto 36px;
  text-align: center;
  color: var(--muted);
  font-size: 1.05rem;
}

/* --- Services overview ("Cosa facciamo") ----------------------------------- */
.services-overview {
  padding-block: 64px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.service-card {
  display: flex;
  flex-direction: column;
}

.service-card .feature-card__text {
  flex: 1;
}

.service-card__image {
  display: block;
  margin-bottom: 16px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--gradient-brand-soft);
}

.service-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.service-card--link {
  color: inherit;
}

.service-card--link:hover {
  text-decoration: none;
}

.service-card__more {
  margin-top: 14px;
  font-weight: 600;
  color: var(--accent-dark);
}

@media (max-width: 860px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Corporate services (photo / video / commercials) ---------------------- */
.corp-services {
  /* Top + bottom breathing room so the gallery never touches the next section. */
  padding-block: 64px;
}

.corp-services__stage {
  position: relative;
  display: block;
  width: 100%;
  /* Decorative backdrop: keep a normal arrow, never a play/text cursor. */
  cursor: default;
  /* Fixed responsive height (NOT aspect-ratio): with aspect-ratio + max-height
	Safari shrinks the WIDTH to keep the ratio, which boxed the stage into the
	left of the page. An explicit width + height keeps it full-bleed. */
  height: clamp(360px, 46vw, 600px);
  overflow: hidden;
  /* The poster (set inline in PHP) is the stage backdrop, shown until the video
	actually plays — or permanently if autoplay is blocked (e.g. Low Power Mode),
	so the frame never falls back to a broken ▶ placeholder. */
  background: var(--ink) center / cover no-repeat;
}

.corp-services__video,
.corp-services__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Pure backdrop: never intercept clicks or show a play cursor. */
  pointer-events: none;
}

/* Poster cover sits ON TOP of the video and masks it until the video genuinely
	plays (the stage gets .is-playing on the `playing` event), then fades out.
	The video itself stays fully opaque — Safari refuses to autoplay an opacity:0
	video — so autoplay still works; when autoplay is blocked (Low Power Mode,
	data-saver) the cover simply stays and hides Safari's ▶ overlay. */
.corp-services__cover {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  pointer-events: none;
  transition: opacity 0.45s ease;
  z-index: 1;
}

.corp-services__stage.is-playing .corp-services__cover {
  opacity: 0;
}

/* Hide Safari's native "start playback" overlay button so a not-yet-autoplaying
	backdrop never looks like a broken ▶ placeholder. */
.corp-services__video::-webkit-media-controls,
.corp-services__video::-webkit-media-controls-start-playback-button,
.corp-services__video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
}

.corp-services__overlay {
  position: absolute;
  inset: 0;
  /* Above the poster cover (z-index:1) so the copy/CTA stay clickable. */
  z-index: 2;
  display: flex;
  align-items: center;
  /* Darken the whole frame so the white copy is legible over any showreel
	frame or a light poster, with extra weight on the left where the text sits. */
  background: linear-gradient(
    90deg,
    rgba(20, 22, 56, 0.88) 0%,
    rgba(20, 22, 56, 0.7) 45%,
    rgba(20, 22, 56, 0.5) 100%
  );
}

.corp-services__content {
  width: 100%;
  color: #fff;
}

.corp-services__title {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.1;
  max-width: 18ch;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.corp-services__text {
  margin: 16px 0 0;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.corp-services__cta {
  margin: 24px 0 0;
}

.corp-services__gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  margin-top: var(--gap);
}

.corp-services__item {
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--gradient-brand-soft);
}

.corp-services__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

a.corp-services__item:hover img {
  transform: scale(1.05);
}

@media (max-width: 860px) {
  .corp-services__gallery {
    grid-template-columns: repeat(3, 1fr);
  }
  .corp-services__stage {
    height: clamp(280px, 56vw, 460px);
  }
}

@media (max-width: 560px) {
  .corp-services__gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  .corp-services__overlay {
    background: linear-gradient(
      0deg,
      rgba(31, 33, 80, 0.85) 0%,
      rgba(31, 33, 80, 0.45) 100%
    );
  }
}

/* --- Portfolio ("Progetto") ------------------------------------------------ */
.portfolio {
  padding-block: 64px;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.project-card {
  display: flex;
  flex-direction: column;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.project-card:hover {
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.project-card__image {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--gradient-brand-soft);
  overflow: hidden;
}

.project-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-card__title {
  margin: 16px 16px 0;
  font-size: 1.15rem;
  color: var(--ink);
}

.project-card__excerpt {
  margin: 8px 16px 18px;
  color: var(--muted);
  font-size: 0.95rem;
}

.portfolio__cta {
  margin-top: 28px;
  text-align: center;
}

/* Single project */
.project-single__header {
  padding-block: 40px 24px;
}

.project-single__types {
  margin: 0 0 6px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-dark);
}

.project-single__title {
  margin: 0;
}

.project-single__cover {
  margin-bottom: 32px;
}

.project-single__cover img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}

.project-single__content {
  max-width: 760px;
  margin-inline: auto;
}

.project-single__back {
  margin-top: 32px;
  text-align: center;
}

.button--ghost {
  background: transparent;
  color: var(--brand);
  border: 1px solid var(--brand);
}

.button--ghost:hover {
  background: var(--brand);
  color: #fff;
}

@media (max-width: 860px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Social proof (logos + testimonials) ----------------------------------- */
.social-proof {
  padding-block: 64px;
}

.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-top: 8px;
}

.logo-strip__item {
  display: inline-flex;
  align-items: center;
}

.logo-strip__item img {
  max-height: 48px;
  width: auto;
  /* Calm, uniform trust strip; colour on hover. */
  filter: grayscale(1);
  opacity: 0.7;
  transition:
    filter 0.25s ease,
    opacity 0.25s ease;
}

.logo-strip__item:hover img {
  filter: none;
  opacity: 1;
}

.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-top: 48px;
}

.testimonial {
  margin: 0;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.testimonial__quote {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink);
}

.testimonial__quote::before {
  content: '“';
  color: var(--accent);
  font-size: 1.6em;
  line-height: 0;
  margin-right: 2px;
  vertical-align: -0.35em;
}

.testimonial__author {
  margin-top: 14px;
  font-weight: 700;
  color: var(--brand);
}

/* --- Final call to action -------------------------------------------------- */
.final-cta {
  margin-top: 16px;
  background: var(--gradient-brand);
}

.final-cta__inner {
  padding-block: 64px;
  text-align: center;
  color: #fff;
}

.final-cta__title {
  margin: 0;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  color: #fff;
}

.final-cta__text {
  margin: 14px auto 0;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.95);
}

.final-cta__action {
  margin: 28px 0 0;
}

.final-cta .button {
  background: #fff;
  color: var(--brand);
}

.final-cta .button:hover {
  background: rgba(255, 255, 255, 0.9);
  color: var(--brand-dark);
}

@media (max-width: 860px) {
  .testimonials {
    grid-template-columns: 1fr;
  }
}

/* --- Hero slider (OVH-style) ----------------------------------------------- */
.hero-slider {
  position: relative;
  background: var(--gradient-brand-soft);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

/* Fixed track height → every slide is the same height, and the image column has
	the full height to be anchored against the top or bottom edge. */
.hero-slider__track {
  position: relative;
  height: var(--hero-h, 520px);
}

/* All slides are stacked (absolute) and cross-fade softly. */
.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.7s ease-in-out,
    visibility 0.7s ease-in-out;
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
}

/* Content gently rises in when the slide becomes active. */
.hero-slide__content > * {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.6s ease 0.1s,
    transform 0.6s ease 0.1s;
}

.hero-slide.is-active .hero-slide__content > * {
  opacity: 1;
  transform: none;
}

.hero-slide__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  gap: 48px;
  width: 100%;
  height: 100%;
}

/* Text is vertically centered and padded; the image column is free to touch
	the slider edges. */
.hero-slide__content {
  align-self: center;
  padding-block: 48px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero-slide__content > * {
    transition: none;
  }
}

.hero-slide__title {
  margin: 0 0 16px;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.hero-slide__subtitle {
  margin: 0 0 28px;
  max-width: 46ch;
  font-size: 1.1rem;
  color: var(--muted);
}

/* The media column fills the full slide height; the image is anchored to the
	top / middle / bottom edge via align-items. */
.hero-slide__media {
  align-self: stretch;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.hero-slide__media img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Image side: default DOM order puts the media on the right; pull it before the
	text for left-placed images. */
.hero-slide--img-left .hero-slide__media {
  order: -1;
}

/* Vertical placement of the image within the full-height media column
	(busts / half-figures). */
.hero-slide__media--top {
  align-items: flex-start;
}

.hero-slide__media--middle {
  align-items: center;
}

.hero-slide__media--bottom {
  align-items: flex-end;
}

/* Navigation arrows */
.hero-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--brand);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.hero-slider__arrow:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.05);
}

.hero-slider__arrow--prev {
  left: 20px;
}

.hero-slider__arrow--next {
  right: 20px;
}

/* Dots */
.hero-slider__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.hero-slider__dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(77, 82, 164, 0.28);
  cursor: pointer;
  transition:
    background 0.15s ease,
    width 0.15s ease;
}

.hero-slider__dot.is-active {
  width: 26px;
  background: var(--gradient-brand);
}

@media (max-width: 860px) {
  /* Stacked layout (image on top, then text), but every slide shares ONE grid
	cell so the track is always as tall as the TALLEST slide and never resizes
	when the slide changes — otherwise height:auto + display:none made the page
	below jump on each transition. Inactive slides stay in the layout
	(visibility:hidden) to keep reserving that max height. */
  .hero-slider__track {
    height: auto;
    display: grid;
  }

  .hero-slide {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    display: block;
  }

  .hero-slide:not(.is-active) {
    visibility: hidden;
  }

  .hero-slide__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 28px;
    height: auto;
    text-align: center;
  }

  .hero-slide__content {
    padding-block: 16px 48px;
  }

  .hero-slide__subtitle {
    margin-inline: auto;
  }

  .hero-slide__media {
    order: -1;
    height: auto;
    padding-top: 40px;
  }

  .hero-slide__media img {
    max-height: 240px;
  }

  .hero-slider__arrow {
    display: none;
  }
}

/* --- Domain search box (OVH-style) ----------------------------------------- */
.domain-box {
  padding-block: 64px;
}

.domain-box__inner {
  text-align: center;
  padding: 48px 32px;
  border-radius: var(--radius);
  background: var(--gradient-brand);
  color: #fff;
}

.domain-box__title {
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: #fff;
}

.domain-box__subtitle {
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.88);
}

.domain-box__form {
  display: flex;
  gap: 10px;
  max-width: 560px;
  margin: 0 auto;
}

.domain-box__input {
  flex: 1;
  padding: 14px 18px;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: 1rem;
}

.domain-box__form .button {
  background: var(--ink);
  border: 0;
  padding-inline: 28px;
  box-shadow: none;
}

.domain-box__form .button:hover {
  filter: brightness(1.12);
}

/* Featured TLD price chips under the search field. */
.domain-box__tlds {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 720px;
  margin: 24px auto 0;
  padding: 0;
  list-style: none;
}

.domain-tld {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.domain-tld__ext {
  font-weight: 700;
}

.domain-tld__price {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 560px) {
  .domain-box__form {
    flex-direction: column;
  }
}

/* --- WooCommerce ----------------------------------------------------------- */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin: 0 !important;
  padding: 0;
  list-style: none;
}

/* WooCommerce adds clearfix ::before/::after on these. Inside a grid/flex they
	become grid items and shove the real cards out of place — neutralise them. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}

.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
}

.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after {
  content: none !important;
}

/* Sale badge in brand cyan, top-right of the card. */
.woocommerce span.onsale {
  min-height: auto;
  min-width: auto;
  padding: 4px 12px;
  margin: 0;
  top: 12px;
  right: 12px;
  left: auto;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  line-height: 1.4;
}

.woocommerce ul.products li.product:hover {
  box-shadow: var(--shadow-md);
}

.woocommerce ul.products li.product .price {
  color: var(--ink);
  font-weight: 700;
}

.woocommerce span.price,
.woocommerce div.product p.price {
  color: var(--ink);
}

.woocommerce .star-rating span::before,
.woocommerce-page .star-rating span::before {
  color: var(--brand);
}

/* Plan specs rendered inside the product tab — clean table, no nested card. */
.nosurprice-plan-specs ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 560px;
}

.nosurprice-plan-specs li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}

.nosurprice-plan-specs li:last-child {
  border-bottom: 0;
}

.nosurprice-plan-specs .spec-label {
  color: var(--muted);
}

.nosurprice-plan-specs .spec-value {
  font-weight: 600;
}

/* My Account layout */
.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* Same clearfix issue as the product grid: kill the table pseudo-elements and
	the default float widths so nav + content sit side by side. */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
  content: none !important;
  display: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--line-soft);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
  border-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: block;
  padding: 12px 16px;
  color: var(--ink);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--surface-alt);
  font-weight: 600;
}

@media (max-width: 782px) {
  .woocommerce-account .woocommerce {
    grid-template-columns: 1fr;
  }
}

/* --- Search form ----------------------------------------------------------- */
.search-form {
  display: flex;
  gap: 8px;
}

.search-field {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

/* --- Footer ---------------------------------------------------------------- */
.site-footer {
  margin-top: 64px;
  border-top: 1px solid var(--line);
  background: var(--surface-alt);
  padding-block: 48px 28px;
}

.footer-widgets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  margin-bottom: 32px;
}

.site-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}

.legal-menu {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Pagination ------------------------------------------------------------ */
.pagination .nav-links,
.woocommerce-pagination ul {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.pagination a,
.pagination span {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
}

.pagination .current {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* --- Comments -------------------------------------------------------------- */
.comment-form-comment {
  display: flex;
  flex-direction: column;
}

/* Textarea first, label underneath it. */
.comment-form-comment textarea {
  order: 1;
  width: 100%;
}

.comment-form-comment label {
  order: 2;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.9rem;
}

.comment-form textarea,
.comment-form input[type='text'],
.comment-form input[type='email'],
.comment-form input[type='url'] {
  width: 100%;
}

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 860px) {
  .container.has-sidebar {
    grid-template-columns: 1fr;
  }

  .features__grid,
  .woocommerce ul.products,
  .footer-widgets,
  .front-page .home-plans ul.products {
    grid-template-columns: repeat(2, 1fr);
  }

  .entry--card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
  }

  .menu-toggle__bars,
  .menu-toggle__bars::before,
  .menu-toggle__bars::after {
    display: block;
    width: 18px;
    height: 2px;
    margin-inline: auto;
    background: var(--ink);
    position: relative;
  }

  .menu-toggle__bars::before,
  .menu-toggle__bars::after {
    content: '';
    position: absolute;
    left: 0;
  }

  .menu-toggle__bars::before {
    top: -6px;
  }

  .menu-toggle__bars::after {
    top: 6px;
  }

  .main-navigation {
    position: relative;
  }

  .main-navigation ul {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    flex-direction: column;
    min-width: 220px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
  }

  .main-navigation.is-open ul {
    display: flex;
  }

  .features__grid,
  .woocommerce ul.products,
  .footer-widgets,
  .front-page .home-plans ul.products {
    grid-template-columns: 1fr;
  }
}

/* --- My Account: orders table -------------------------------------------- */
.woocommerce-account .woocommerce-orders-table {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.woocommerce-account .woocommerce-orders-table th {
  background: var(--surface-alt);
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 16px;
}

.woocommerce-account .woocommerce-orders-table td {
  padding: 14px 16px;
  border-top: 1px solid var(--line-soft);
  vertical-align: middle;
  font-size: 14px;
}

.woocommerce-orders-table__cell-order-number a {
  font-weight: 600;
}

/* Actions: compact, right-aligned, on one tidy row. */
.woocommerce-orders-table__cell-order-actions {
  text-align: right;
  white-space: nowrap;
}

.woocommerce-orders-table__cell-order-actions .woocommerce-button.button {
  display: inline-block;
  margin: 3px 0 3px 6px;
  padding: 7px 14px;
  font-size: 13px;
  line-height: 1.2;
  border-radius: var(--radius-sm);
}

/* Pay stays the primary (filled) action; view/cancel become quiet ghosts. */
.woocommerce-orders-table__cell-order-actions .button.view,
.woocommerce-orders-table__cell-order-actions .button.cancel {
  background: transparent;
  color: var(--brand);
  border: 1px solid var(--line);
  box-shadow: none;
}

.woocommerce-orders-table__cell-order-actions .button.view:hover,
.woocommerce-orders-table__cell-order-actions .button.cancel:hover {
  background: var(--surface-alt);
  color: var(--brand-dark);
}

.woocommerce-orders-table__cell-order-actions .button.cancel {
  color: var(--danger);
}

.woocommerce-orders-table__cell-order-actions .button.cancel:hover {
  background: rgba(179, 45, 46, 0.12);
  color: var(--danger);
}

@media (max-width: 600px) {
  .woocommerce-account .woocommerce-orders-table thead {
    display: none;
  }
  .woocommerce-account .woocommerce-orders-table tr {
    display: block;
    border-top: 1px solid var(--line);
    padding: 8px 0;
  }
  .woocommerce-account .woocommerce-orders-table td {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    border: 0;
    padding: 6px 16px;
    text-align: right;
  }
  .woocommerce-account .woocommerce-orders-table td::before {
    content: attr(data-title);
    font-weight: 600;
    color: var(--muted);
  }
  .woocommerce-orders-table__cell-order-actions {
    text-align: left;
    white-space: normal;
  }
  .woocommerce-orders-table__cell-order-actions .woocommerce-button.button {
    margin: 3px 6px 3px 0;
  }
}

/* --- Cart / checkout: one option per line (no run-on meta) ---------------- */
/* Block cart/checkout item details. */
.wc-block-components-product-details {
  margin: 0.5em 0 0;
  padding: 0;
  list-style: none;
}

.wc-block-components-product-details__item {
  display: block;
  margin: 2px 0;
  font-size: 13px;
  color: var(--muted);
}

.wc-block-components-product-details__name {
  font-weight: 600;
  color: var(--ink);
}

/* Classic cart/checkout item meta (<dl class="variation">). */
.woocommerce dl.variation {
  margin: 0.5em 0 0;
  font-size: 13px;
}

.woocommerce dl.variation dt,
.woocommerce dl.variation dd {
  display: block;
  margin: 0;
  padding: 0;
}

.woocommerce dl.variation dt {
  font-weight: 600;
  color: var(--ink);
}

.woocommerce dl.variation dd {
  color: var(--muted);
  margin-bottom: 2px;
}

/* --- Colour-theme toggle (header) ------------------------------------------ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition:
    border-color 0.15s ease,
    transform 0.15s ease;
}
.theme-toggle:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
 * Sticky footer: on short pages, keep the footer pinned to the viewport bottom
 * (no white strip below it). Body becomes a full-height column; the main content
 * area grows to fill the gap. Header/footer keep their natural height.
 * ------------------------------------------------------------------------- */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
body > main,
.site-main {
	flex: 1 0 auto;
}
.site-header,
.site-footer {
	flex: 0 0 auto;
}