/*
Theme Name: CN Brand Studio
Theme URI: https://cnbrand.gr/
Author: CN Brand Studio
Description: Custom storefront for CN Brand Studio — print, embroidery, engraving & web in Komotini.
Version: 1.3.0
Text Domain: copynotes
*/

:root {
  --cn-ink: #2a2430;
  --cn-ink-soft: #4a4254;
  --cn-muted: #7a7184;
  --cn-line: #f0d6e2;
  --cn-paper: #fceef4;
  --cn-surface: #fff9fb;
  --cn-accent: #5b8fd9;
  --cn-accent-deep: #3f6fb8;
  --cn-accent-soft: #e3eefc;
  --cn-pink: #f4b6cb;
  --cn-pink-deep: #e891b0;
  --cn-max: 1120px;
  --cn-font-display: "IBM Plex Serif", Georgia, serif;
  --cn-font-brand: "Playfair Display", "IBM Plex Serif", Georgia, serif;
  --cn-font-body: "IBM Plex Sans", "Segoe UI", sans-serif;
  --cn-radius: 0.75rem;
}

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

html {
  scroll-behavior: smooth;
  /* Stops the sticky header from covering the target of an in-page link. */
  scroll-padding-top: 7rem;
}

body {
  margin: 0;
  font-family: var(--cn-font-body);
  color: var(--cn-ink);
  background:
    radial-gradient(1100px 560px at 8% -12%, #ffe6f0 0%, transparent 55%),
    radial-gradient(900px 520px at 100% 0%, #dce9ff 0%, transparent 52%),
    var(--cn-paper);
  line-height: 1.6;
  font-size: 1.02rem;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--cn-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--cn-ink);
}

.cn-wrap {
  width: min(100% - 2rem, var(--cn-max));
  margin-inline: auto;
}

/* Header */
.cn-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(252, 238, 244, 0.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--cn-line);
}

.cn-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
}

.cn-logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 0.65rem;
  color: var(--cn-ink);
}

.cn-logo:hover {
  color: var(--cn-ink);
}

.cn-logo__badge {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
}

.cn-logo__words {
  display: grid;
  gap: 0.2rem;
  line-height: 1;
}

.cn-logo__name {
  font-family: var(--cn-font-brand);
  font-weight: 600;
  font-size: 1.22rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cn-logo__sub {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--cn-accent);
}

/* Below this width the menu no longer fits beside the logo, so it drops to its own row
   and leaves the top row to the logo and the cart. */
@media (max-width: 720px) {
  .cn-header__inner {
    flex-wrap: wrap;
    row-gap: 0.7rem;
  }

  .cn-header__inner nav {
    order: 3;
    width: 100%;
  }

  .cn-nav {
    justify-content: center;
    gap: 0.1rem 0.75rem;
  }

  /* Roomier hit areas for thumbs. */
  .cn-nav a {
    display: block;
    padding: 0.5rem 0.35rem;
  }
}

@media (max-width: 480px) {
  .cn-logo__name {
    font-size: 1.08rem;
  }

  .cn-logo__badge {
    width: 2.15rem;
    height: 2.15rem;
  }

  .cn-cart__label {
    display: none;
  }
}

.cn-cart {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--cn-line);
  border-radius: 999px;
  background: var(--cn-surface);
  color: var(--cn-ink);
  font-weight: 600;
  font-size: 0.9rem;
}

.cn-cart:hover {
  color: var(--cn-accent);
  border-color: var(--cn-accent);
}

.cn-cart__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--cn-accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

.cn-cart__count.is-empty {
  background: var(--cn-line);
  color: var(--cn-muted);
}

.cn-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cn-nav a {
  color: var(--cn-ink-soft);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}

.cn-nav a:hover {
  color: var(--cn-accent);
}

/* Hero — full bleed, brand first */
.cn-hero {
  position: relative;
  min-height: min(88vh, 720px);
  display: grid;
  align-items: end;
  color: #fff8fb;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(42, 30, 56, 0.62) 0%, rgba(42, 30, 56, 0.22) 42%, transparent 68%),
    linear-gradient(180deg, rgba(90, 60, 90, 0.12) 0%, rgba(55, 40, 75, 0.55) 72%),
    url("assets/hero-brand.webp") center / cover no-repeat,
    #f4b6cb;
}

.cn-hero__content {
  width: min(100% - 2rem, var(--cn-max));
  margin: 0 auto 4.25rem;
  /* Keeps the copy legible wherever the photo runs light behind it. */
  text-shadow: 0 1px 14px rgba(28, 18, 42, 0.5);
  animation: cn-rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cn-hero__brand {
  font-family: var(--cn-font-brand);
  font-size: clamp(2.5rem, 7.5vw, 4.6rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
  line-height: 1.04;
}

.cn-hero__brand span {
  display: block;
  font-family: var(--cn-font-body);
  font-size: 0.22em;
  font-weight: 600;
  letter-spacing: 0.52em;
  margin-top: 0.55em;
  color: #cfe0ff;
}

.cn-hero__tag {
  font-size: 1.08rem;
  font-weight: 400;
  opacity: 0.92;
  margin: 0 0 1.6rem;
  max-width: 30rem;
  line-height: 1.55;
}

.cn-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.cn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  font-weight: 560;
  font-size: 0.95rem;
  border: 0;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.cn-btn:hover {
  transform: translateY(-2px);
}

.cn-btn--primary {
  background: #fff9fb;
  color: var(--cn-ink);
  box-shadow: 0 12px 28px rgba(80, 40, 70, 0.16);
}

.cn-btn--primary:hover {
  background: #fff;
  color: var(--cn-ink);
}

.cn-btn--ghost {
  background: transparent;
  color: #fff9fb;
  outline: 1px solid rgba(255, 249, 251, 0.6);
}

.cn-btn--ghost:hover {
  background: rgba(255, 249, 251, 0.12);
  color: #fff;
}

.cn-btn--accent {
  background: var(--cn-accent);
  color: #fff;
}

.cn-btn--accent:hover {
  background: var(--cn-accent-deep);
  color: #fff;
}

/* Sections */
.cn-section {
  padding: 4rem 0;
}

.cn-section h2 {
  font-family: var(--cn-font-display);
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  font-weight: 600;
  margin: 0 0 0.55rem;
  letter-spacing: -0.025em;
  color: var(--cn-ink);
}

.cn-section__lead {
  color: var(--cn-muted);
  margin: 0 0 2rem;
  max-width: 34rem;
  font-size: 1.02rem;
}

/* Category tiles — the way into the shop from the home page */
.cn-tiles {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.cn-tile {
  /* A column so the label bar can stretch: names run to one or two lines and the
     bars would otherwise end at different heights across a row. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--cn-radius);
  background: var(--cn-surface);
  box-shadow: 0 1px 2px rgba(42, 36, 48, 0.06);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cn-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(42, 36, 48, 0.13);
}

.cn-tile__media {
  display: block;
  /* Portrait, like the photographs, so nothing worth seeing is cropped away. */
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--cn-accent-soft);
}

.cn-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.cn-tile:hover .cn-tile__media img {
  transform: scale(1.04);
}

.cn-tile__bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.9rem 1rem 1rem;
  background: var(--cn-ink);
  text-align: center;
}

.cn-tile__name {
  display: block;
  color: #fff;
  font-family: var(--cn-font-display);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

.cn-tile__from {
  display: block;
  margin-top: 0.2rem;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.82rem;
}

.cn-steps {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .cn-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}

.cn-step {
  position: relative;
  background: var(--cn-surface);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius);
  padding: 1.25rem 1.3rem;
  animation: cn-rise 0.7s ease both;
}

/* A one-line heading is a small target on a phone, so the whole card takes the tap. */
.cn-step strong a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.cn-step strong {
  display: block;
  font-family: var(--cn-font-display);
  font-size: 1.1rem;
  margin-bottom: 0.35rem;
  font-weight: 600;
}

.cn-step p {
  margin: 0;
  color: var(--cn-muted);
  font-size: 0.95rem;
}

.cn-step__num {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cn-pink-deep);
  margin-bottom: 0.55rem;
  font-weight: 600;
}

/* Business package feature block */
.cn-package__grid {
  display: grid;
  gap: 1.75rem;
  align-items: center;
}

@media (min-width: 860px) {
  .cn-package__grid {
    grid-template-columns: 1.05fr 1fr;
    gap: 3rem;
  }
}

.cn-package__media {
  display: block;
  border-radius: var(--cn-radius);
  border: 1px solid var(--cn-line);
  overflow: hidden;
  background: var(--cn-surface);
}

.cn-package__media img {
  width: 100%;
  transition: transform 0.4s ease;
}

.cn-package__media:hover img {
  transform: scale(1.03);
}

.cn-package__body h2 {
  margin-top: 0;
}

.cn-package__list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.cn-package__list li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--cn-ink-soft);
  font-size: 0.97rem;
}

.cn-package__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--cn-pink-deep);
}

.cn-package__price {
  font-family: var(--cn-font-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--cn-accent);
  margin: 0 0 1.25rem;
}

.cn-package__price del {
  color: var(--cn-muted);
  font-size: 0.75em;
  margin-right: 0.4rem;
}

/* The subcategories of a category, above its products */
.cn-subcats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.85rem;
  margin: 0 0 2rem;
}

.cn-subcat {
  display: block;
  padding: 0.7rem 0.7rem 0.85rem;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius);
  background: var(--cn-surface);
  color: var(--cn-ink);
  text-align: center;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.cn-subcat:hover {
  border-color: var(--cn-accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(42, 36, 48, 0.1);
}

.cn-subcat__media {
  display: block;
  aspect-ratio: 1 / 1;
  margin-bottom: 0.55rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
}

.cn-subcat__media img {
  width: 100%;
  height: 100%;
  /* Product mockups sit centred with air around them; cropping to fill would cut
     the garment in half and show nothing but fabric. */
  object-fit: contain;
}

.cn-subcat__name {
  display: block;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.3;
}

.cn-subcat__count {
  display: block;
  color: var(--cn-muted);
  font-size: 0.8rem;
}

/* "per piece" beside the price of anything printed in runs */
.cn-unit {
  color: var(--cn-muted);
  font-size: 0.78em;
  font-weight: 400;
}

/* Woo overrides — minimal cards only where interaction needs them */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.35rem;
  margin: 0 !important;
  padding: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  display: none !important;
  content: none !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  background: var(--cn-surface);
  border-radius: var(--cn-radius);
  padding: 0;
  border: 1px solid var(--cn-line);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(20, 22, 28, 0.08);
}

/* Contain, not cover: the invitations are portrait cards and cropping them square
   would cut the artwork off the top and bottom. */
.woocommerce ul.products li.product img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #fff;
  margin: 0 !important;
  border-radius: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--cn-font-display);
  font-size: 1.05rem !important;
  font-weight: 560;
  padding: 0.95rem 1rem 0.2rem;
  color: var(--cn-ink);
}

.woocommerce ul.products li.product .price {
  display: block;
  padding: 0 1rem 0.85rem;
  color: var(--cn-accent) !important;
  font-weight: 600;
  font-size: 0.98rem;
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  margin: 0 1rem 1rem !important;
}

/* Opens the product designer. Outlined, so it reads as the second action next to
   the filled add-to-cart button rather than competing with it. */
.cn-designer-link {
  display: block;
  margin: 0 1rem 1rem;
  padding: 0.62rem 1rem;
  border: 1px solid var(--cn-accent);
  border-radius: 999px;
  color: var(--cn-accent);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.cn-designer-link:hover {
  background: var(--cn-accent);
  color: #fff;
}

.woocommerce div.product .cn-designer-link {
  display: inline-block;
  margin: 0.85rem 0 0;
  padding: 0.75rem 1.5rem;
}

/* Invitations
   ------------------------------------------------------------------ */

/* The chips above the range. Kept as links rather than a form so a chosen style can
   be sent to someone in a message and open the same shelf. */
.cn-filters {
  margin: 0 0 1.6rem;
  padding: 1rem 1.15rem 0.6rem;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius);
  background: var(--cn-surface);
}

.cn-filters__row {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin-bottom: 0.55rem;
}

.cn-filters__label {
  flex: 0 0 5.5rem;
  color: var(--cn-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.cn-filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.cn-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.34rem 0.75rem;
  border: 1px solid var(--cn-line);
  border-radius: 999px;
  background: #fff;
  color: var(--cn-ink);
  font-size: 0.88rem;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.cn-chip:hover {
  border-color: var(--cn-accent);
  color: var(--cn-accent);
}

.cn-chip.is-on {
  border-color: var(--cn-accent);
  background: var(--cn-accent);
  color: #fff;
}

.cn-chip__count {
  color: var(--cn-muted);
  font-size: 0.78rem;
}

.cn-chip.is-on .cn-chip__count,
.cn-chip:hover .cn-chip__count {
  color: inherit;
  opacity: 0.75;
}

.cn-filters__clear {
  display: inline-block;
  margin: 0.2rem 0 0.5rem;
  color: var(--cn-muted);
  font-size: 0.85rem;
}

.cn-empty {
  padding: 2rem 0;
  color: var(--cn-muted);
}

/* The invitation is photographed lying on a surface, and the photograph is square, so
   it drops straight into the frame the rest of the shop uses. */
.cn-invitations ul.products li.product .cn-card__media {
  position: relative;
  display: block;
}

.cn-card__blank {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.cn-invitations ul.products li.product:hover .cn-card__blank {
  opacity: 1;
}

/* With the add-to-cart button gone, the designer is the only way in and reads as the
   main action rather than an alternative to one. */
.cn-invitations ul.products li.product .cn-designer-link {
  background: var(--cn-accent);
  color: #fff;
}

.cn-invitations ul.products li.product .cn-designer-link:hover {
  filter: brightness(0.95);
}

/* The designer plugin prints its own link on variable products. Same button. */
.product-designer-editor-link {
  margin: 0.85rem 0 0;
}

.product-designer-editor-link a {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--cn-accent);
  border-radius: 999px;
  color: var(--cn-accent);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.product-designer-editor-link a:hover {
  background: var(--cn-accent);
  color: #fff;
}

.product-designer-editor-link .fa {
  display: none;
}

/* Product tabs as pills — Woo's folder tabs break apart once they wrap. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.25rem;
  padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  border: 1px solid var(--cn-line);
  border-radius: 999px;
  background: var(--cn-surface);
  box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 0.55rem 1rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--cn-ink-soft);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-color: transparent;
  background: linear-gradient(120deg, var(--cn-pink) 0%, var(--cn-accent) 100%);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: #fff;
}

/* Shop toolbar */
.woocommerce .woocommerce-result-count {
  color: var(--cn-muted);
  font-size: 0.92rem;
}

.woocommerce .woocommerce-ordering select {
  font: inherit;
  font-size: 1rem;
  max-width: 100%;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--cn-line);
  border-radius: 999px;
  background: var(--cn-surface);
  color: var(--cn-ink);
}

.woocommerce span.onsale {
  background: var(--cn-ink);
  border-radius: 999px;
  min-height: 2rem;
  line-height: 2rem;
  padding: 0 0.7rem;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce button.button.alt {
  background: linear-gradient(120deg, var(--cn-pink-deep), var(--cn-accent)) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  border: 0 !important;
  padding: 0.75rem 1.25rem !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover {
  background: var(--cn-accent-deep) !important;
}

.woocommerce div.product div.images img {
  border-radius: var(--cn-radius);
  border: 1px solid var(--cn-line);
}

.woocommerce div.product .product_title {
  font-family: var(--cn-font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* The block-based cart and checkout ship their own buttons, outside the classic Woo selectors. */
.wc-block-components-button:not(.is-link) {
  background: linear-gradient(120deg, var(--cn-pink-deep), var(--cn-accent)) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}

.wc-block-components-button:not(.is-link):hover {
  background: var(--cn-accent-deep) !important;
}

/* Page content */
.cn-content {
  padding: 2.75rem 0 4.5rem;
}

.cn-404 {
  padding: 2rem 0 3rem;
  max-width: 34rem;
}

.cn-404__code {
  font-family: var(--cn-font-brand);
  font-size: clamp(3.5rem, 12vw, 6rem);
  line-height: 1;
  margin: 0;
  color: var(--cn-pink);
}

.cn-404 .cn-btn--primary {
  border: 1px solid var(--cn-line);
}

.cn-content .entry-title {
  font-family: var(--cn-font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-top: 0;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
}

/* Form */
.cn-form {
  display: grid;
  gap: 1rem;
  max-width: 34rem;
  background: var(--cn-surface);
  padding: 1.5rem;
  border-radius: var(--cn-radius);
  border: 1px solid var(--cn-line);
}

.cn-form label {
  display: grid;
  gap: 0.35rem;
  font-weight: 560;
  font-size: 0.92rem;
  /* Grid tracks default to min-content, and a file input's is wide enough to
     push the form past the screen edge. */
  min-width: 0;
}

.cn-form input,
.cn-form select,
.cn-form textarea {
  font: inherit;
  /* Under 16px, mobile Safari zooms the page in on focus. */
  font-size: 1rem;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0.75rem 0.85rem;
  border-radius: 0.55rem;
  border: 1px solid #d5d8de;
  background: #fff;
  color: var(--cn-ink);
}

.cn-form input:focus,
.cn-form select:focus,
.cn-form textarea:focus {
  outline: 2px solid var(--cn-accent-soft);
  border-color: var(--cn-accent);
}

.cn-form button {
  justify-self: start;
}

.cn-notice {
  padding: 0.9rem 1rem;
  border-radius: 0.65rem;
  background: var(--cn-accent-soft);
  color: #15555c;
  margin-bottom: 1rem;
}

.cn-notice--error {
  background: #f8e9ec;
  color: #8a1c38;
}

/* Footer */
.cn-footer {
  background: linear-gradient(160deg, #3a2f45 0%, #2a3558 100%);
  color: #e8dfe8;
  padding: 3rem 0;
  margin-top: 1rem;
}

.cn-footer strong {
  font-family: var(--cn-font-display);
  color: #fff5f9;
  font-size: 1.15rem;
  font-weight: 600;
}

.cn-footer a {
  color: #d7e6ff;
}

.cn-footer__grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 720px) {
  .cn-footer__grid {
    grid-template-columns: 1.5fr 1fr;
  }
}

/* Colour swatches — the drop-down stays in the form for WooCommerce, out of sight.
   The long selector is to outweigh WooCommerce's own rule on the same select.
   Keyed on the class our script adds, so the drop-down survives if JS fails. */
.woocommerce div.product form.cart.cn-has-swatches .variations .cn-swatches ~ select {
  display: none;
}

/* Only variations carry a code, so keep the meta line quiet until one is chosen. */
.woocommerce div.product.product-type-variable .product_meta .sku_wrapper {
  display: none;
}

.woocommerce div.product.cn-variation-chosen .product_meta .sku_wrapper {
  display: inline;
}

.woocommerce div.product .product_meta {
  display: grid;
  gap: 0.3rem;
  font-size: 0.92rem;
}

/* The size drop-down and quantity box ship unstyled; bring them into the palette
   and give them a comfortable target size. */
.woocommerce div.product form.cart .variations select {
  font: inherit;
  font-size: 1rem;
  min-height: 44px;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--cn-line);
  border-radius: 999px;
  background: var(--cn-surface);
  color: var(--cn-ink);
}

.woocommerce div.product form.cart .quantity input.qty {
  width: 4.25rem;
  min-height: 46px;
  padding: 0.5rem;
  border: 1px solid var(--cn-line);
  border-radius: 999px;
  background: var(--cn-surface);
  font: inherit;
  font-size: 1rem;
  text-align: center;
  color: var(--cn-ink);
}

.cn-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.15rem 0;
}

/* One-size garments: the row is chosen for the customer, so it is not shown. */
.cn-single-choice {
  display: none;
}

.cn-swatch {
  position: relative;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border: 1px solid var(--cn-line);
  border-radius: 50%;
  background: var(--cn-swatch, var(--cn-surface));
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cn-swatch__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Colours without a hex fall back to a readable pill. */
.cn-swatch--text {
  width: auto;
  height: auto;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: var(--cn-surface);
  color: var(--cn-ink-soft);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
}

.cn-swatch--text .cn-swatch__label {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip-path: none;
}

.cn-swatch:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px var(--cn-pink);
}

.cn-swatch.is-selected {
  box-shadow: 0 0 0 2px var(--cn-accent);
  border-color: var(--cn-accent);
}

.cn-swatch:focus-visible {
  outline: 2px solid var(--cn-accent-deep);
  outline-offset: 2px;
}

.cn-swatch.is-unavailable {
  cursor: not-allowed;
  opacity: 0.32;
}

.cn-swatch.is-unavailable::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to top right, transparent 46%, var(--cn-ink) 46%, var(--cn-ink) 54%, transparent 54%);
}

.cn-swatch.is-unavailable:hover {
  transform: none;
  box-shadow: none;
}

.cn-swatches__chosen {
  margin: 0.35rem 0 0;
  color: var(--cn-muted);
  font-size: 0.88rem;
}

.cn-swatches__chosen:empty {
  margin: 0;
}

/* Phones: two products per row reads faster than one giant card per screen. */
@media (max-width: 599px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
  }

  /* The label sits over its chips on a phone; side by side left room for two words.
     Each group then swipes sideways on one line, so twenty-three chips cost three rows
     of screen instead of nine and the invitations stay in sight. */
  .cn-filters {
    padding: 0.85rem 0 0.5rem 0.85rem;
  }

  .cn-filters__row {
    display: block;
    margin-bottom: 0.8rem;
  }

  .cn-filters__label {
    display: block;
    margin-bottom: 0.35rem;
  }

  .cn-filters__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-right: 0.85rem;
    scrollbar-width: none;
  }

  .cn-filters__chips::-webkit-scrollbar {
    display: none;
  }

  .cn-chip {
    flex: 0 0 auto;
  }

  .cn-filters__clear {
    margin-left: 0.1rem;
  }

  /* Two across, or the eight categories become a very long scroll on a phone. */
  .cn-tiles,
  .cn-subcats {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .cn-tile__bar {
    padding: 0.7rem 0.6rem 0.8rem;
  }

  .cn-tile__name {
    font-size: 0.92rem;
  }

  .cn-tile__from {
    font-size: 0.78rem;
  }

  .cn-subcat__name {
    font-size: 0.88rem;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.95rem !important;
    padding: 0.7rem 0.7rem 0.15rem;
  }

  .woocommerce ul.products li.product .price {
    padding: 0 0.7rem 0.6rem;
    font-size: 0.9rem;
  }

  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .added_to_cart {
    display: block;
    margin: 0 0.7rem 0.7rem !important;
    padding: 0.6rem 0.7rem !important;
    font-size: 0.82rem !important;
    text-align: center;
  }

  .woocommerce .woocommerce-ordering,
  .woocommerce .woocommerce-ordering select {
    width: 100%;
  }

  .cn-header__inner {
    padding: 0.6rem 0 0.45rem;
  }

  /* Keeps all four menu items on a single row at 360px and up. */
  .cn-nav {
    gap: 0.1rem 0.55rem;
  }

  .cn-nav a {
    font-size: 0.86rem;
    padding: 0.5rem 0.2rem;
  }

  /* Woo lays the variation picker out as a table; stacked rows give the
     swatches and size drop-down the full width. */
  .woocommerce div.product form.cart .variations,
  .woocommerce div.product form.cart .variations tbody,
  .woocommerce div.product form.cart .variations tr,
  .woocommerce div.product form.cart .variations th,
  .woocommerce div.product form.cart .variations td {
    display: block;
    width: 100%;
    text-align: left;
  }

  .woocommerce div.product form.cart .variations th.label {
    padding: 0 0 0.3rem;
  }

  .woocommerce div.product form.cart .variations td.value {
    padding: 0 0 0.9rem;
  }

  .woocommerce div.product form.cart .variations select {
    width: 100%;
  }

  .cn-form button,
  .cn-form input[type="submit"] {
    justify-self: stretch;
    min-height: 46px;
  }

  .cn-swatch {
    width: 2.5rem;
    height: 2.5rem;
  }

  .woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
  .woocommerce div.product form.cart:not(.variations_form) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
  }

  .woocommerce div.product form.cart .button {
    flex: 1 1 8rem;
    min-height: 46px;
  }

  .cn-section {
    padding: 2.75rem 0;
  }

  /* The wide layout darkens the left where the text sits; a narrow screen needs the
     shading at the bottom instead. */
  .cn-hero {
    min-height: min(78vh, 620px);
    background:
      linear-gradient(180deg, rgba(42, 30, 56, 0.12) 0%, rgba(40, 28, 54, 0.52) 50%, rgba(34, 22, 48, 0.84) 100%),
      url("assets/hero-brand.webp") center / cover no-repeat,
      #f4b6cb;
  }

  .cn-hero__content {
    margin-bottom: 2.75rem;
  }

  .cn-cta {
    gap: 0.6rem;
  }

  .cn-btn {
    padding: 0.7rem 1.1rem;
    font-size: 0.92rem;
  }
}

/* Tablet cards are narrow enough that the default label wraps onto two lines. */
@media (min-width: 600px) and (max-width: 900px) {
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .added_to_cart {
    padding: 0.6rem 0.9rem !important;
    font-size: 0.85rem !important;
  }
}

/* A tap leaves :hover stuck on touch screens, so drop the lift and zoom effects. */
@media (hover: none) {
  .cn-btn:hover,
  .cn-swatch:hover,
  .woocommerce ul.products li.product:hover,
  .cn-package__media:hover img {
    transform: none;
  }

  .woocommerce ul.products li.product:hover {
    box-shadow: none;
  }
}

@keyframes cn-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}