/* ============================================================
   CIRCONIS — Shipping Page Styles
   css/shipping.css
   ============================================================ */


/* ============================================================
   SHIPPING HERO — full-width image (same pattern as contact)
   ============================================================ */
   .shipping-hero {
    position: relative;
    min-height: 52vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--color-bg-dark);
    padding-top: var(--nav-height);
  }
  
  .shipping-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  
  .shipping-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
  }
  
  .shipping-hero__gradient {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(
        to top,
        rgba(14, 12, 8, 1.0)  0%,
        rgba(14, 12, 8, 0.65) 40%,
        rgba(14, 12, 8, 0.2)  100%
      );
  }
  
  .shipping-hero__content {
    position: relative;
    z-index: 2;
    padding-bottom: clamp(var(--sp-12), 6vw, var(--sp-20));
  }
  
  .shipping-hero__content .section-header__eyebrow {
    margin-bottom: var(--sp-4);
  }
  
  .shipping-hero__title {
    font-size: clamp(var(--text-4xl), 8vw, var(--text-6xl));
    color: var(--color-bg);
    line-height: 1.0;
    margin-bottom: var(--sp-5);
  }
  
  .shipping-hero__desc {
    font-size: clamp(var(--text-base), 1.5vw, var(--text-md));
    color: rgba(231, 219, 199, 0.65);
    line-height: 1.7;
    max-width: 52ch;
  }
  
  
  /* ============================================================
     SHIPPING AT A GLANCE
     ============================================================ */
  .shipping-glance {
    background: var(--color-bg-mid);
    border-bottom: 1px solid var(--color-border-dark);
  }
  
  .glance-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-6);
  }
  
  .glance-card {
    background: var(--color-surface-dark);
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-lg);
    padding: var(--sp-8) var(--sp-8) var(--sp-10);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    transition: border-color var(--dur-mid) var(--ease-out),
                transform var(--dur-mid) var(--ease-out);
  }
  
  .glance-card:hover {
    border-color: rgba(220, 169, 80, 0.3);
    transform: translateY(-2px);
  }
  
  .glance-card--featured {
    border-color: rgba(161, 70, 61, 0.5);
    background: var(--color-surface-dark);
  }
  
  .glance-card--featured .glance-card__title {
    color: var(--color-accent);
  }
  
  .glance-card--featured .glance-card__icon {
    background: rgba(161, 70, 61, 0.12);
    border-color: rgba(161, 70, 61, 0.35);
    color: var(--color-accent);
  }
  
  .glance-card__icon {
    width: 48px;
    height: 48px;
    background: rgba(220, 169, 80, 0.08);
    border: 1px solid rgba(220, 169, 80, 0.2);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
  }
  
  .glance-card__title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    letter-spacing: var(--ls-heading);
    color: var(--color-bg);
    line-height: 1.1;
  }
  
  .glance-card__desc {
    font-size: var(--text-sm);
    color: var(--color-muted);
    line-height: 1.7;
  }
  
  
  /* ============================================================
     SHIPPING ZONES TABLE
     ============================================================ */
  .shipping-zones {
    background: var(--color-bg-dark);
  }
  
  .zones-table {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: var(--sp-8);
  }
  
  .zones-table__header {
    display: grid;
    grid-template-columns: 90px 1fr 180px 140px;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-6);
    background: rgba(220, 169, 80, 0.06);
    border-bottom: 1px solid var(--color-border-dark);
  }
  
  .zones-table__header span {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--color-primary);
  }
  
  .zones-table__row {
    display: grid;
    grid-template-columns: 90px 1fr 180px 140px;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--color-border-dark);
    align-items: center;
    transition: background var(--dur-fast) var(--ease-out);
  }
  
  .zones-table__row:last-child {
    border-bottom: none;
  }
  
  .zones-table__row:hover {
    background: rgba(220, 169, 80, 0.03);
  }
  
  .zones-table__cell {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
  }
  
  .zones-table__cell strong {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-bg);
    line-height: 1.4;
  }
  
  .zones-table__note {
    font-size: var(--text-xs);
    color: var(--color-muted);
  }
  
  .zone-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: rgba(220, 169, 80, 0.1);
    border: 1px solid rgba(220, 169, 80, 0.25);
    border-radius: var(--radius-sm);
    padding: var(--sp-1) var(--sp-3);
    white-space: nowrap;
  }
  
  .delivery-time {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-bg);
  }
  
  .shipping-cost {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    letter-spacing: var(--ls-heading);
    color: var(--color-primary);
  }
  
  .zones-note {
    font-size: var(--text-sm);
    color: var(--color-muted);
    line-height: 1.65;
    margin-top: var(--sp-5);
    padding: var(--sp-4) var(--sp-5);
    background: rgba(220, 169, 80, 0.04);
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-md);
  }
  
  
  /* ============================================================
     DISPATCH STEPS
     ============================================================ */
  .dispatch-info {
    background: var(--color-bg-mid);
    border-top: 1px solid var(--color-border-dark);
    border-bottom: 1px solid var(--color-border-dark);
  }
  
  .dispatch-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
    margin-top: var(--sp-8);
  }
  
  .dispatch-step {
    display: flex;
    gap: var(--sp-5);
    align-items: flex-start;
    padding: var(--sp-6);
    background: var(--color-surface-dark);
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-lg);
    transition: border-color var(--dur-mid) var(--ease-out);
  }
  
  .dispatch-step:hover {
    border-color: rgba(220, 169, 80, 0.3);
  }
  
  .dispatch-step__num {
    font-size: var(--text-3xl);
    color: rgba(220, 169, 80, 0.2);
    line-height: 1;
    flex-shrink: 0;
    transition: color var(--dur-mid) var(--ease-out);
  }
  
  .dispatch-step:hover .dispatch-step__num {
    color: rgba(220, 169, 80, 0.5);
  }
  
  .dispatch-step__title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    letter-spacing: var(--ls-heading);
    color: var(--color-bg);
    margin-bottom: var(--sp-2);
  }
  
  .dispatch-step__desc {
    font-size: var(--text-sm);
    color: var(--color-muted);
    line-height: 1.7;
  }
  
  
  /* ============================================================
     FAQ ACCORDION
     ============================================================ */
  .shipping-faq {
    background: var(--color-bg-dark);
  }
  
  .faq-list {
    margin-top: var(--sp-8);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  
  .faq-item {
    border-bottom: 1px solid var(--color-border-dark);
  }
  
  .faq-item:last-child {
    border-bottom: none;
  }
  
  .faq-item__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-6) var(--sp-7);
    text-align: left;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-bg);
    background: transparent;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
  }
  
  .faq-item__question:hover {
    background: rgba(220, 169, 80, 0.04);
    color: var(--color-primary);
  }
  
  .faq-item.open .faq-item__question {
    color: var(--color-primary);
    background: rgba(220, 169, 80, 0.04);
  }
  
  .faq-item__chevron {
    flex-shrink: 0;
    color: var(--color-muted);
    transition: transform var(--dur-mid) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
  }
  
  .faq-item.open .faq-item__chevron {
    transform: rotate(180deg);
    color: var(--color-primary);
  }
  
  .faq-item__answer {
    padding: 0 var(--sp-7) var(--sp-6);
    border-top: 1px solid var(--color-border-dark);
  }
  
  .faq-item__answer p {
    font-size: var(--text-sm);
    color: var(--color-muted);
    line-height: 1.75;
    padding-top: var(--sp-5);
  }
  
  .faq-cta {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    margin-top: var(--sp-8);
    padding: var(--sp-6) var(--sp-7);
    background: rgba(220, 169, 80, 0.04);
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-lg);
  }
  
  .faq-cta p {
    font-size: var(--text-base);
    color: var(--color-muted);
    flex: 1;
  }
  
  
  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 960px) {
    .glance-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  
    .dispatch-grid {
      grid-template-columns: 1fr;
    }
  }
  
  @media (max-width: 768px) {
    .zones-table__header,
    .zones-table__row {
      grid-template-columns: 80px 1fr 140px;
    }
  
    /* Hide shipping cost column header on tablet, show inline */
    .zones-table__header span:last-child {
      display: none;
    }
  
    .zones-table__cell:last-child {
      display: none;
    }
  
    /* Show price inline with delivery time */
    .zones-table__row {
      grid-template-columns: 80px 1fr 1fr;
    }
  }
  
  @media (max-width: 560px) {
    .glance-grid {
      grid-template-columns: 1fr;
    }
  
    .zones-table__header,
    .zones-table__row {
      grid-template-columns: 1fr;
      gap: var(--sp-2);
    }
  
    .zones-table__header {
      display: none;
    }
  
    .zones-table__row {
      padding: var(--sp-5);
      gap: var(--sp-3);
    }
  
    .zones-table__cell:last-child {
      display: flex;
    }
  
    .faq-item__question {
      padding: var(--sp-5);
      font-size: var(--text-sm);
    }
  
    .faq-item__answer {
      padding: 0 var(--sp-5) var(--sp-5);
    }
  
    .faq-cta {
      flex-direction: column;
      align-items: flex-start;
    }
  }