/* ==========================================================================
   responsive.css — breakpoints
   Mobile first overrules: 1200 / 1024 / 900 / 720 / 560 / 400
   ========================================================================== */

/* ----------------------------- <= 1200px ------------------------------ */

@media (max-width: 1200px) {
  .footer__grid {
    grid-template-columns: 1.5fr repeat(2, 1fr) 1.4fr;
  }

  .footer__col--payments {
    grid-column: span 2;
  }

  .trust-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--4 {
    grid-template-columns: repeat(3, 1fr);
  }

  .routine {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ----------------------------- <= 1024px ------------------------------ */

@media (max-width: 1024px) {
  .primary-nav {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .header-search-wrap {
    display: block;
    order: 3;
    flex: 1 1 100%;
    padding-bottom: var(--sp-3);
  }

  .site-header__bar {
    flex-wrap: wrap;
    padding-top: var(--sp-2);
  }

  .header-actions {
    margin-left: auto;
  }

  .header-actions__link--partner span {
    display: none;
  }

  .header-actions__link--partner {
    padding: var(--sp-2);
  }

  /* move search out of the bar into its own row */
  .site-search {
    max-width: none;
  }

  .product-layout {
    grid-template-columns: 1fr;
  }

  .product-gallery {
    position: static;
  }

  .cart-layout {
    grid-template-columns: 1fr;
  }

  .summary-card {
    position: static;
  }

  .with-sidebar,
  .account-layout,
  .policy-layout,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .sidebar,
  .policy-toc {
    position: static;
  }

  .account-nav {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--line-soft);
  }

  .account-nav::-webkit-scrollbar {
    display: none;
  }

  .account-nav button,
  .account-nav a {
    width: auto;
    white-space: nowrap;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-soft);
  }

  .account-nav__count {
    margin-left: var(--sp-2);
  }

  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .split,
  .split--wide-left,
  .split--narrow {
    grid-template-columns: 1fr;
  }

  .split:not(.split--top) .ratio-frame {
    max-width: 460px;
    margin-inline: auto;
  }

  .story-media__badge {
    right: var(--sp-4);
  }
}

/* ------------------------------ <= 900px ------------------------------ */

@media (max-width: 900px) {
  :root {
    --section-y: clamp(2.5rem, 7vw, 4rem);
  }

  .announcement__links {
    display: none;
  }

  .announcement__inner {
    justify-content: center;
    position: relative;
  }

  .announcement__close {
    position: absolute;
    right: 0;
  }

  .announcement__message {
    padding-right: 1.75rem;
  }

  .mobile-filter-toggle {
    display: inline-flex;
  }

  .mobile-filter-close {
    display: inline-flex;
  }

  /* The shop filter panel becomes a right-hand drawer that slides in above a
     dimmed backdrop, so the rest of the catalogue stays visible behind it. */
  .with-sidebar > .sidebar {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: var(--z-drawer);
    width: min(340px, 88vw);
    padding: var(--sp-5) var(--sp-5) 0;
    background: var(--surface);
    border-left: 1px solid var(--line-soft);
    box-shadow: var(--sh-float);
    transform: translateX(105%);
    visibility: hidden;
    overflow-y: auto;
    transition: transform var(--dur-slow) var(--ease-out), visibility 0s var(--dur-slow);
  }

  .with-sidebar.show-filters > .sidebar {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--dur-slow) var(--ease-out);
  }

  /* The panel fills the drawer; the actions bar pins to the bottom. */
  .with-sidebar > .sidebar .sidebar__panel {
    flex: 1 1 auto;
  }

  .with-sidebar > .sidebar .sidebar__head-actions .filter-reset {
    display: none;
  }

  .with-sidebar > .sidebar .sidebar__foot {
    display: flex;
    flex: 0 0 auto;
  }

  .with-sidebar > .sidebar .sidebar__foot .btn {
    flex: 1 1 50%;
  }

  .with-sidebar.show-filters > .filter-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-drawer) - 1);
    border: 0;
    background: rgba(6, 20, 38, 0.42);
    cursor: pointer;
  }

  /* The contact help column stacks below the form on small screens.
     .contact-layout is already collapsed to one column above; this just
     drops the desktop sticky offset, which the .sidebar reset above does
     not cover because this element is not .sidebar. */
  .contact-help {
    position: static;
  }

  .grid--2 {
    grid-template-columns: 1fr;
  }

  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .order-detail-grid {
    grid-template-columns: 1fr;
  }

  .bank-card__grid {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .toolbar {
    align-items: stretch;
  }

  .toolbar__group {
    width: 100%;
  }

  .select-inline {
    flex: 1 1 auto;
  }

  /* The catalogue hero stacks: copy first, banner beneath, both centred. */
  .catalogue-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .catalogue-hero__copy {
    margin-inline: auto;
  }

  .catalogue-hero__media {
    max-width: 620px;
    margin-inline: auto;
  }

  /* The collections hero stacks: copy centred above the framed artwork. */
  .collections-hero__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .collections-hero__copy {
    max-width: 40rem;
    margin-inline: auto;
  }

  .collections-hero__lead {
    margin-inline: auto;
  }

  .collections-hero__actions {
    justify-content: center;
  }

  .collections-hero__media {
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
  }

  .hero__inner {
    min-height: 0;
    padding-block: clamp(3rem, 10vw, 4.5rem);
  }

  .hero__text {
    font-size: var(--fs-md);
  }

  .hero__proof {
    gap: var(--sp-4);
  }

  /* The layered hero panel needs room to breathe once the copy centres. */
  .hero--banner .hero__content {
    padding: clamp(1.25rem, 5vw, 2rem);
  }
}

/* ------------------------------ <= 720px ------------------------------ */

@media (max-width: 720px) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5) var(--sp-4);
  }

  .footer__col--about,
  .footer__col--payments {
    grid-column: 1 / -1;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .trust-row,
  .grid--3,
  .grid--4,
  .category-grid,
  .routine,
  .team-grid,
  .grid--auto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The two collection cards stack into wide banners. */
  .collection-feature-grid {
    grid-template-columns: 1fr;
  }

  .collection-feature__media {
    aspect-ratio: 16 / 10;
  }

  .trust-item {
    flex-direction: column;
    text-align: center;
    gap: var(--sp-2);
  }

  .marquee::before,
  .marquee::after {
    width: 48px;
  }

  .marquee__track {
    gap: var(--sp-5);
  }

  .marquee__track span {
    font-size: var(--fs-2xs);
    letter-spacing: 0.14em;
  }

  .kit-list {
    grid-template-columns: 1fr;
  }

  .assurance-grid {
    grid-template-columns: 1fr;
  }

  .product-gallery__thumbs {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-2);
  }

  .card,
  .cart-panel,
  .form-section,
  .summary-card,
  .detail-box,
  .tracker {
    padding: var(--sp-4);
  }

  .line-item {
    grid-template-columns: 64px 1fr;
    gap: var(--sp-3);
  }

  .line-item__foot {
    gap: var(--sp-2);
  }

  .btn-row .btn,
  .buy-row .btn {
    flex: 1 1 100%;
  }

  .buy-row .qty {
    flex: 1 1 100%;
    justify-content: space-between;
  }

  .buy-row .qty input {
    flex: 1 1 auto;
  }

  .newsletter__form .btn {
    width: 100%;
  }

  .steps {
    font-size: var(--fs-2xs);
  }

  .steps li + li::before {
    width: 12px;
  }

  .steps li span:not(.steps__num) {
    display: none;
  }

  .steps li.is-active span:not(.steps__num) {
    display: inline;
  }

  .agent-id-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .sticky-cta__inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .fab {
    width: 48px;
    height: 48px;
  }

  .fab svg {
    width: 22px;
    height: 22px;
  }

  .back-to-top {
    width: 40px;
    height: 40px;
  }

  .drawer,
  .drawer--cart {
    width: 100%;
  }

  .modal {
    padding: var(--sp-4);
    align-items: flex-end;
  }

  .modal__dialog {
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    max-height: 88vh;
  }

  /* ---- About: editorial stacking (task 4) ---- */

  .about-team__grid {
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 5vw, 2.75rem);
  }

  .about-member:nth-child(even) {
    margin-top: 0;
  }

  .about-categories__grid,
  .about-commit__grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------ <= 560px ------------------------------ */

@media (max-width: 560px) {
  .brand__tag {
    display: none;
  }

  .brand__name {
    font-size: var(--fs-md);
  }

  .brand__mark {
    width: 32px;
    height: 32px;
  }

  .header-actions__link span {
    display: none;
  }

  .footer__grid,
  .trust-row,
  .grid--2,
  .grid--3,
  .grid--4,
  .grid--auto,
  .category-grid,
  .routine,
  .team-grid {
    grid-template-columns: 1fr;
  }

  .category-card {
    aspect-ratio: 16 / 11;
  }

  .collection-feature__index {
    top: var(--sp-3);
    left: var(--sp-3);
  }

  .trust-item {
    flex-direction: row;
    text-align: left;
  }

  /* Hero proof chips become a tidy stack of full-width cards. */
  .hero__proof-item {
    flex: 1 1 100%;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
  }

  .hero__proof-item strong {
    font-size: var(--fs-lg);
  }

  .newsletter {
    padding: var(--sp-5) var(--sp-4);
    border-radius: var(--r-lg);
  }

  .product-card__desc {
    -webkit-line-clamp: 2;
  }

  .toast-host {
    width: calc(100vw - 1.5rem);
    bottom: var(--sp-3);
  }

  .modal__dialog {
    padding: var(--sp-5) var(--sp-4);
  }

  .step-list li {
    padding-left: 2.9rem;
  }

  .step-list li::before {
    width: 36px;
    height: 36px;
    font-size: var(--fs-sm);
  }

  .order-number-box {
    flex-direction: column;
    gap: var(--sp-2);
    text-align: center;
  }

  .proof-preview {
    flex-direction: column;
    text-align: center;
  }

  .radio-card,
  .address-card {
    padding: var(--sp-3);
  }

  .kv dt,
  .kv dd {
    font-size: var(--fs-xs);
  }

  .empty {
    padding: var(--sp-6) var(--sp-4);
  }

  .error-page__code {
    font-size: clamp(3.5rem, 22vw, 5rem);
  }
}

/* ------------------------------ <= 400px ------------------------------ */

@media (max-width: 400px) {
  :root {
    --gutter: 0.75rem;
  }

  .btn {
    padding: 0.65rem 1rem;
    font-size: var(--fs-xs);
  }

  .btn--lg {
    padding: 0.8rem 1.2rem;
    font-size: var(--fs-sm);
  }

  .qty input {
    width: 32px;
  }

  .kit-list li,
  .icon-list li {
    font-size: var(--fs-xs);
  }
}

/* ------------------------- landscape phones -------------------------- */

@media (max-height: 480px) and (orientation: landscape) {
  .hero__inner {
    min-height: 0;
    padding-block: var(--sp-6);
  }

  .drawer__body {
    padding-block: var(--sp-3);
  }
}

/* ------------------------------ print -------------------------------- */

/* ------------------------------ ABOUT (task 4) ------------------------ */

@media (max-width: 900px) {
  .about-story__inner,
  .about-leadership__inner,
  .about-head--split {
    grid-template-columns: 1fr;
  }

  .about-story__aside {
    position: static;
  }

  .about-head--split {
    align-items: start;
  }

  .about-portrait {
    max-width: 380px;
    margin-inline: auto;
  }
}

@media (max-width: 560px) {
  .about-principle {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .about-quote {
    font-size: 1.05rem;
  }

  .about-close__title {
    font-size: 1.55rem;
  }
}

@media print {
  .announcement,
  .site-header,
  .site-footer,
  .fab-stack,
  .sticky-cta,
  .btn,
  .toolbar {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .card,
  .detail-box,
  .form-section,
  .tracker {
    border: 1px solid #999;
    box-shadow: none;
  }

  .policy-layout,
  .with-sidebar {
    display: block;
  }

  .with-sidebar > .sidebar {
    position: static;
    transform: none;
    visibility: visible;
  }

  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
  }
}