/* SoCal Ragdolls 1.8: Playfair navigation, overlay bag count and a quiet one-column checkout. */

/* The existing Google Fonts request already loads Playfair Display 400/500/600. */
@media(min-width:841px){
  .sr-header .ra-menu > li > a {
    font-family:var(--display,'Playfair Display',Georgia,serif);
    font-size:18px;
    font-weight:600;
    line-height:1.35;
    letter-spacing:-.018em;
  }
  .sr-header .ra-menu .sub-menu a {
    font-family:var(--display,'Playfair Display',Georgia,serif);
    font-size:15px;
    font-weight:500;
    line-height:1.5;
  }
}
@media(min-width:841px) and (max-width:1150px){
  /* Preserve room for the centered logo until the menu collapses on mobile. */
  .sr-header .ra-menu > li > a{font-size:15px;letter-spacing:-.025em;}
  .sr-header .ra-menu{gap:clamp(10px,1.35vw,17px);}
}
@media(max-width:840px){
  .sr-header .ra-menu > li > a{
    font-family:var(--display,'Playfair Display',Georgia,serif);
    font-size:clamp(29px,6.6vw,46px);
    font-weight:600;
    line-height:1.3;
    letter-spacing:-.035em;
  }
  .sr-header .ra-main-nav .sub-menu li a{
    font-family:var(--display,'Playfair Display',Georgia,serif);
    font-size:17px;
    font-weight:500;
  }
}

/* Overlay a small live quantity badge on the bag's upper-right handle.
   v1.7 intentionally positioned the badge beside the icon; override that rule. */
.sr-header .sr-header-actions .ra-bag-button{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 44px;
  gap:0!important;
  width:44px!important;
  min-width:44px!important;
  max-width:44px;
  height:44px;
  min-height:44px;
  padding:7px;
  overflow:visible;
  isolation:isolate;
}
.sr-header .sr-header-actions .ra-bag-button svg{
  display:block;
  width:27px;
  height:27px;
  flex:0 0 27px;
}
.sr-header .sr-header-actions .ra-bag-button .ra-bag-count{
  position:absolute!important;
  top:0!important;
  right:0!important;
  left:auto!important;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:18px;
  min-width:18px;
  height:18px;
  margin:0!important;
  padding:0;
  border-radius:50%;
  background:#a48c7a;
  color:#fff;
  font:700 10px/1 var(--sans,Inter,sans-serif);
  font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 2px #fff;
}
@media(max-width:600px){
  .sr-header .sr-header-actions .ra-bag-button{
    width:41px!important;
    min-width:41px!important;
    max-width:41px;
    flex-basis:41px;
    height:42px;
    min-height:42px;
  }
  .sr-header .sr-header-actions .ra-bag-button svg{width:25px;height:25px;flex-basis:25px;}
}

/* One-column checkout on ALL screen widths: review bag, billing, additional
   information, order review, payment. Preserve WooCommerce's hooks and fields. */
body.woocommerce-checkout .ra-checkout-page .ra-basic-header{
  max-width:820px;
  margin:0 auto 24px;
  text-align:left;
}
body.woocommerce-checkout .ra-checkout-page .ra-basic-header h1{
  font-size:clamp(39px,5vw,58px);
  line-height:1.13;
  margin:0;
}
body.woocommerce-checkout .ra-checkout-page .ra-page-content{
  width:100%;
  max-width:820px;
  margin-inline:auto;
}
body.woocommerce-checkout .ra-checkout-page .woocommerce,
body.woocommerce-checkout .ra-checkout-page form.checkout{
  width:100%;
  max-width:none;
  margin-inline:auto;
}
body.woocommerce-checkout form.checkout .col2-set#customer_details{
  display:flex!important;
  flex-direction:column;
  align-items:stretch;
  width:100%!important;
  max-width:100%;
  gap:25px;
  margin:0;
  padding:0;
  float:none!important;
}
body.woocommerce-checkout form.checkout #customer_details > .col-1,
body.woocommerce-checkout form.checkout #customer_details > .col-2,
body.woocommerce-checkout .ra-basic-page .woocommerce .col2-set .col-1,
body.woocommerce-checkout .ra-basic-page .woocommerce .col2-set .col-2{
  display:block;
  width:100%!important;
  max-width:100%!important;
  float:none!important;
  clear:both;
  flex:0 0 auto;
  padding:0;
  margin:0;
  box-sizing:border-box;
}
body.woocommerce-checkout form.checkout #customer_details > .col-2{
  border-top:1px solid #e2e9e9;
  padding-top:23px;
}
body.woocommerce-checkout form.checkout .woocommerce-billing-fields,
body.woocommerce-checkout form.checkout .woocommerce-shipping-fields,
body.woocommerce-checkout form.checkout .woocommerce-additional-fields{
  width:100%;
  max-width:100%;
  margin:0;
}
body.woocommerce-checkout form.checkout .woocommerce-additional-fields h3,
body.woocommerce-checkout form.checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout form.checkout #order_review_heading{
  font:500 clamp(25px,3vw,32px)/1.25 var(--display,'Playfair Display',Georgia,serif);
  color:#273d45;
  letter-spacing:-.025em;
  margin:0 0 22px;
}
body.woocommerce-checkout form.checkout .form-row-first,
body.woocommerce-checkout form.checkout .form-row-last,
body.woocommerce-checkout form.checkout .form-row-wide,
body.woocommerce-checkout form.checkout .woocommerce-additional-fields .form-row{
  width:100%!important;
  float:none!important;
  clear:both;
  padding:0;
  margin:0 0 19px;
}
body.woocommerce-checkout form.checkout .woocommerce-input-wrapper,
body.woocommerce-checkout form.checkout input.input-text,
body.woocommerce-checkout form.checkout textarea,
body.woocommerce-checkout form.checkout .select2-container{
  width:100%!important;
  max-width:100%;
}
body.woocommerce-checkout form.checkout .form-row label{
  display:block;
  color:#44585d;
  font:600 12px/1.6 var(--sans,Inter,sans-serif);
  margin-bottom:6px;
}
body.woocommerce-checkout form.checkout input.input-text,
body.woocommerce-checkout form.checkout textarea,
body.woocommerce-checkout form.checkout select,
body.woocommerce-checkout .select2-container .select2-selection--single{
  min-height:49px;
  border:1px solid #d7e1e3;
  border-radius:2px;
  background:#fafcfc;
  padding:12px 14px;
  color:#29424a;
  box-sizing:border-box;
}
body.woocommerce-checkout form.checkout textarea{min-height:112px;resize:vertical;}
body.woocommerce-checkout .select2-container .select2-selection--single{
  display:flex;align-items:center;height:auto;padding:10px 14px;
}
body.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered{padding:0;line-height:1.55;}
body.woocommerce-checkout form.checkout input:focus-visible,
body.woocommerce-checkout form.checkout textarea:focus-visible,
body.woocommerce-checkout form.checkout select:focus-visible{
  outline:2px solid #6f929c;outline-offset:2px;
}
body.woocommerce-checkout form.checkout #order_review_heading{
  width:100%;
  float:none;
  clear:both;
  padding:28px 0 0;
  margin:25px 0 18px;
  border-top:1px solid #e2e9e9;
}
body.woocommerce-checkout form.checkout #order_review,
body.woocommerce-checkout form.checkout .woocommerce-checkout-review-order,
body.woocommerce-checkout form.checkout .woocommerce-checkout-payment{
  display:block;
  width:100%!important;
  max-width:100%;
  float:none!important;
  clear:both;
  margin:0;
  box-sizing:border-box;
}
body.woocommerce-checkout .ra-checkout-bag{
  width:100%;
  max-width:none;
  margin:12px 0 34px;
  padding:25px 27px;
  box-sizing:border-box;
}
body.woocommerce-checkout .ra-checkout-bag-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
}
body.woocommerce-checkout .ra-checkout-bag-inner .ra-cart-bag-bottom{
  margin-top:20px;
  padding:18px;
  width:100%;
  box-sizing:border-box;
}
body.woocommerce-checkout .ra-basic-page .woocommerce .woocommerce-checkout-review-order{
  padding:20px;
  background:#f7fafa;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table{
  width:100%;
  margin:0 0 25px;
  border-color:#dce5e7;
}
body.woocommerce-checkout .woocommerce-checkout-payment{
  border-radius:2px!important;
  background:#f3f7f7!important;
  padding:21px;
}
body.woocommerce-checkout .woocommerce-checkout-payment .place-order{
  padding:15px 0 0!important;
  margin-bottom:0!important;
}

/* One consistent SoCal button treatment throughout WooCommerce's classic
   product, checkout, account, coupon, and order pages. */
.woocommerce :is(a.button,button.button,input.button,.button.alt),
.woocommerce-page :is(a.button,button.button,input.button,.button.alt),
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:49px;
  padding:13px 21px;
  border:1px solid #28434b;
  border-radius:2px;
  box-sizing:border-box;
  background:#28434b;
  color:#fff;
  font:600 12px/1.4 var(--sans,Inter,sans-serif);
  letter-spacing:.015em;
  text-decoration:none;
  box-shadow:none;
  transition:background-color .2s,color .2s,border-color .2s;
}
.woocommerce :is(a.button,button.button,input.button,.button.alt):hover,
.woocommerce-page :is(a.button,button.button,input.button,.button.alt):hover,
.woocommerce #payment #place_order:hover,
.woocommerce-page #payment #place_order:hover{
  background:#42636c;
  color:#fff;
  border-color:#42636c;
}
.woocommerce :is(a.button,button.button,input.button,.button.alt):focus-visible,
.woocommerce-page :is(a.button,button.button,input.button,.button.alt):focus-visible{
  outline:2px solid #7495a0;
  outline-offset:3px;
}
.woocommerce :is(button.button:disabled,button.button:disabled[disabled],input.button:disabled){
  background:#c1cccf;
  border-color:#c1cccf;
  color:#304951;
  cursor:not-allowed;
}
body.woocommerce-checkout #payment #place_order,
body.woocommerce-checkout .woocommerce #place_order{
  display:flex;
  width:100%;
  min-height:52px;
  margin:0;
  text-align:center;
}
body.woocommerce-checkout .woocommerce-checkout .ra-button,
body.woocommerce-checkout .ra-checkout-bag .ra-button{
  border-radius:2px;
  background:#28434b;
  color:#fff;
  min-height:49px;
}
body.woocommerce-checkout .woocommerce-checkout .ra-button:hover,
body.woocommerce-checkout .ra-checkout-bag .ra-button:hover{background:#42636c;color:#fff;}
@media(max-width:600px){
  body.woocommerce-checkout .ra-checkout-page .ra-page-content{max-width:100%;}
  body.woocommerce-checkout .ra-checkout-bag{padding:18px 15px;}
  body.woocommerce-checkout .ra-basic-page .woocommerce .woocommerce-checkout-review-order{padding:14px;}
  body.woocommerce-checkout .woocommerce-checkout-payment{padding:15px;}
}