/* utilities/responsive.css
   Every breakpoint in one place. Mobile is the primary view.
   Rewind Club - loaded in order by functions.php. */

@media (max-width:900px){
  .rc-hero__grid,
  .woocommerce div.product{grid-template-columns:1fr; gap:34px}
  .rc-steps{grid-template-columns:1fr}
  .rc-fgrid{grid-template-columns:1fr 1fr}
  .rc-jcard{grid-template-columns:1fr}
  .rc-jspine{flex-direction:row; align-items:center; padding:16px 20px}
  .rc-jspine__vert{writing-mode:horizontal-tb; transform:none}
  .rc-quote{grid-template-columns:1fr}
  .rc-contact__grid{grid-template-columns:1fr}
  .rc-2col,
  .rc-2col--text,
  .rc-2col--media{grid-template-columns:1fr}
  .rc-2col--media-right .rc-2col__media{order:0}
  .rc-2col--media-right .rc-2col__text{order:0}
}

@media (max-width:600px){
  :root{--logo-height:52px}
}

@media (max-width:520px){
  .rc-fgrid{grid-template-columns:1fr}

.rc-jbody{padding:24px 20px}

.rc-pricetag{width:88px; height:88px; font-size:13px; right:4px; top:-10px}

.rc-tracks li{grid-template-columns:28px 1fr; }

.rc-tracks .rt{grid-column:2; }
}

@media print{
  .rc-header,.rc-ticker,.rc-footer,.rc-cta{display:none}

body{background:#fff}
}

@media (max-width:1080px){
  .woocommerce-account.logged-in .woocommerce{grid-template-columns:220px minmax(0,1fr); gap:22px}
}

@media (max-width:920px){
  /* 44px is the smallest comfortable tap target. */
  .rc-burger{display:block; padding:12px 13px; min-height:44px; min-width:44px}

  .rc-bar{flex-wrap:nowrap; gap:12px}

  .rc-cart{margin-left:0; order:3}

  .wordmark{font-size:20px}

  /* --- The mobile menu is a drawer that slides in from the right. --- */
  .rc-nav{
    position:fixed; top:0; right:0; bottom:0;
    width:min(86vw, 360px);
    z-index:950;   /* above .rc-top (900), or the header blocks the close button */
    margin:0; padding:76px 20px 28px;
    background:var(--card);
    border-left:1.5px solid var(--line);
    box-shadow:-18px 0 40px -24px var(--shadow);
    overflow-y:auto; overscroll-behavior:contain;
    transform:translateX(100%);
    transition:transform .32s cubic-bezier(.22,.61,.36,1);
    display:block;
  }

  .rc-nav.is-open{transform:translateX(0)}

  .rc-nav__close{display:block}

  .rc-nav ul{flex-direction:column; gap:2px; padding:0; align-items:stretch}

  .rc-nav a{
    display:block; padding:14px 14px; font-size:17px; border-radius:12px;
    border-bottom:1.5px solid var(--line-soft);
  }

  .rc-nav li:last-child a{border-bottom:0}

  .woocommerce-account.logged-in .woocommerce{grid-template-columns:1fr}

  .woocommerce-account .woocommerce-MyAccount-navigation{position:static}

  .woocommerce-account .woocommerce-MyAccount-navigation ul{
    flex-direction:row; flex-wrap:wrap; gap:6px;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation a{padding:9px 14px; font-size:14px}
}

@media (max-width:782px){
  /* The admin bar's hover trick is a desktop idea; keep it out of the way. */
  #wpadminbar{width:100% !important; position:fixed !important; top:auto !important; bottom:0 !important}
}

@media (max-width:680px){
  body{font-size:16px}

.wrap{width:min(1180px,100vw - 32px)}

.rc-hero{padding-top:22px}

.rc-pricetag{width:78px; height:78px; font-size:12px; border-width:2px; right:2px; top:-8px}

.rc-cta{gap:10px}

.rc-cta .o-btn{flex:1 1 100%; justify-content:center}

.rc-trust{gap:6px 14px; font-size:10.5px}

.rc-jbody{padding:22px 18px}

.rc-tracks li{grid-template-columns:26px 1fr; row-gap:2px}

.rc-tracks .rt{grid-column:2; grid-row:3; text-align:left; padding-top:2px}

.rc-jfoot .o-btn{width:100%; justify-content:center}

.rc-jspine{padding:14px 18px}

.rc-jspine__side{font-size:34px}

.rc-sechead{gap:16px}

.rc-sechead .o-btn{width:100%; justify-content:center}

.rc-quote{padding:26px 22px; gap:18px; text-align:left}

.rc-quote__av{width:64px; height:64px}

.rc-quote__av img{width:64px; height:64px}

.rc-cta-band{padding:28px 22px}

.rc-cta-band .o-btn{width:100%; justify-content:center}

.woocommerce ul.products,
.rc-postlist{grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px}

.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:16px; padding:4px 14px 0 !important}

.woocommerce ul.products li.product .rc-loop-kind{padding:14px 14px 0; font-size:9.5px}

.woocommerce ul.products li.product .rc-loop-desc{display:none}

.woocommerce ul.products li.product .price{padding:8px 14px 0; font-size:17px}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{margin:12px 14px 16px; width:calc(100% - 28px); justify-content:center; font-size:14px}

.woocommerce div.product{gap:26px}

.woocommerce div.product .product_title{font-size:30px}

.woocommerce div.product p.price,
.woocommerce div.product span.price{font-size:28px}

.woocommerce div.product form.cart .button{width:100%; justify-content:center}

.rc-plan{grid-template-columns:20px 1fr; row-gap:4px}

.rc-plan__p{grid-column:2; text-align:left}

.wcsatt-options-prompt-label{padding:13px 14px}

  /* Cart and checkout stop being tables. */
.woocommerce table.shop_table_responsive tr,
.woocommerce-page table.shop_table_responsive tr{
    display:block; border-bottom:1.5px solid var(--line-soft); padding:6px 0;
  }

.woocommerce table.shop_table_responsive td,
.woocommerce-page table.shop_table_responsive td{
    display:flex; justify-content:space-between; gap:16px; text-align:right;
    padding:9px 16px; border:0;
  }

.woocommerce table.shop_table_responsive thead{display:none}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-account .woocommerce-MyAccount-content{padding:18px}

.rc-fgrid{grid-template-columns:1fr; gap:26px}

.rc-fine{flex-direction:column; gap:8px}

.rc-footer{padding:40px 0 28px}

.rc-signup{max-width:none}

.rc-split{gap:26px}

.rc-split__media .rc-illus{max-width:240px}
}

@media (max-width:420px){
  h1{font-size:clamp(28px,8.4vw,34px)}

.rc-lede{font-size:17px}

.wordmark{font-size:18px; gap:8px}

.rc-cart{padding:9px 12px; font-size:13px}

.woocommerce ul.products{grid-template-columns:1fr 1fr; gap:12px}
}

/* Taps need room; hover styles shouldn't stick on touch devices. */
@media (hover:none){
  .woocommerce ul.products li.product:hover{transform:none; box-shadow:none}

.o-btn:hover,
.btn:hover{transform:none}