/* The customer account area: heading, sign-in / create-account card, and the
   signed-in pages (orders, delivery address, your details). Builds on the
   shared .sdf-auth-* card styling in dist/woocommerce.css. Brand palette only. */

/* ---------- heading ---------- */
.sdf-acc-head{max-width:640px;margin:0 0 clamp(22px,3.5vw,34px)}
.sdf-acc-head h1{font-family:'Cormorant',serif;font-weight:600;font-size:clamp(32px,5vw,50px);line-height:1.04;margin:6px 0 0;letter-spacing:-0.01em}
.sdf-acc-head .eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--gold,#B08D3E)}
.sdf-acc-sub{margin-top:10px;color:var(--ink-soft,#6F6353);font-size:15px;line-height:1.6}
.sdf-acc-head--auth{text-align:center;margin-left:auto;margin-right:auto}

/* ---------- signed out: one card, two tabs ---------- */
.sdf-woo #customer_login.sdf-auth-ready{
  display:block;max-width:480px;margin:0 auto;
  background:var(--paper-raise,#FAF5EA);border:1px solid var(--hairline,rgba(23,20,15,.12));
  border-radius:16px;padding:24px 24px 28px;box-shadow:0 30px 60px -34px rgba(90,35,48,.35)}
.sdf-woo #customer_login.sdf-auth-ready .u-column1,
.sdf-woo #customer_login.sdf-auth-ready .u-column2{width:auto;float:none;margin:0;padding:0}
.sdf-woo #customer_login.sdf-auth-ready h2{display:none}
.sdf-woo #customer_login.sdf-auth-ready form.woocommerce-form-login,
.sdf-woo #customer_login.sdf-auth-ready form.register{
  background:none!important;border:0!important;box-shadow:none!important;
  padding:0!important;margin:0!important;max-width:none!important}
.sdf-woo #customer_login .woocommerce-privacy-policy-text p{font-size:12px;line-height:1.55;color:var(--ink-soft,#6F6353)}
/* first name + last name side by side */
.sdf-name-row{display:grid;gap:0 14px;grid-template-columns:1fr}
@media(min-width:420px){.sdf-name-row{grid-template-columns:1fr 1fr}}

/* "or" divider and the Google button */
.sdf-or{display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:var(--ink-soft,#6F6353);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.sdf-or::before,.sdf-or::after{content:"";flex:1;height:1px;background:var(--hairline,rgba(23,20,15,.12))}
/* Google's own button reads as a real, separate object sitting on the page
   rather than another form field, which is the point of it: it hands off to
   an account a person already trusts. A hairline border read as just another
   input outline; a soft, warm-tinted shadow at rest (deepening on hover, flat
   on press) is what actually gives it that lifted, clickable weight. */
.sdf-google{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  min-height:45px;box-sizing:border-box;padding:13px 18px;border:0;border-radius:999px;
  background:#fff;color:#3C4043;font-size:14px;font-weight:600;text-decoration:none;
  box-shadow:0 1px 2px rgba(23,20,15,.16),0 6px 16px -8px rgba(23,20,15,.22);
  transition:box-shadow .25s,transform .25s cubic-bezier(.22,1,.36,1)}
.sdf-google:hover{box-shadow:0 2px 4px rgba(23,20,15,.18),0 10px 24px -8px rgba(23,20,15,.3);transform:translateY(-1px)}
.sdf-google:active{box-shadow:0 1px 2px rgba(23,20,15,.16);transform:translateY(0)}
.sdf-google:focus-visible{outline:2px solid var(--fig,#5A2330);outline-offset:2px}
.sdf-google svg{flex:none}
@media(prefers-reduced-motion:reduce){.sdf-google{transition:box-shadow .25s}.sdf-google:hover{transform:none}}
/* The social-login plugin renders its own button markup. It is a good button
   and a stranger to this page, so it is brought to the same width, the same
   pill and the same weight as everything else in the card rather than left
   looking bolted on. The plugin's own colours stay: people recognise them. */
.sdf-google-plugin{margin:0;width:100%}
.sdf-google-plugin .nsl-container{margin:0!important;padding:0!important;width:100%!important}
/* the plugin renders this as a CSS grid sized to its own content (inline-grid,
   justify-items: start by default), which is why width:100% on the button
   inside it had no effect: the grid's own track, not the button, decides the
   available width. Forcing the container to a block-level, full-width box
   gives the button a full-width track to stretch into. */
.sdf-google-plugin .nsl-container-buttons{display:block!important;width:100%!important}
.sdf-google-plugin a,
.sdf-google-plugin .nsl-button{
  width:100%!important;max-width:none!important;box-sizing:border-box!important;
  min-height:45px!important;
  border:0!important;border-radius:999px!important;overflow:hidden;
  box-shadow:0 1px 2px rgba(23,20,15,.16),0 6px 16px -8px rgba(23,20,15,.22)!important;
  font-family:'Hanken Grotesk',sans-serif!important;font-weight:600!important;
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
.sdf-google-plugin .nsl-button{display:flex!important;align-items:center!important}
.sdf-google-plugin .nsl-button-svg-container{flex:0 0 auto!important}
.sdf-google-plugin .nsl-button-label-container{flex:1 1 auto!important;text-align:center!important}
.sdf-google-plugin a:hover,.sdf-google-plugin .nsl-button:hover{
  transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(23,20,15,.18),0 10px 24px -8px rgba(23,20,15,.3)!important}
.sdf-google-plugin a:active,.sdf-google-plugin .nsl-button:active{
  transform:translateY(0);box-shadow:0 1px 2px rgba(23,20,15,.16)!important}
.sdf-google-plugin a:focus-visible,.sdf-google-plugin .nsl-button:focus-visible{
  outline:2px solid var(--fig,#5A2330);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  .sdf-google-plugin a,.sdf-google-plugin .nsl-button{transition:none}
  .sdf-google-plugin a:hover,.sdf-google-plugin .nsl-button:hover{transform:none}
}

/* ---------- signed in ---------- */
/* The greeting sits above both columns, not inside one of them. */
body.woocommerce-account.logged-in .sdf-woo .woocommerce > .sdf-acc-head{grid-column:1/-1;margin-bottom:4px}
@media(min-width:820px){
  body.woocommerce-account.logged-in .sdf-woo .woocommerce{grid-template-columns:230px minmax(0,1fr)}
}
.sdf-woo .woocommerce-MyAccount-navigation{position:relative}
.sdf-woo .woocommerce-MyAccount-navigation a{border-radius:10px;padding:12px 14px;transition:background-color .2s,color .2s}
.sdf-woo .woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--hairline,rgba(23,20,15,.1))}
.sdf-woo .woocommerce-MyAccount-navigation li:last-child{border-bottom:0}
.sdf-woo .woocommerce-MyAccount-navigation a:hover{background:rgba(176,141,62,.1)}
.sdf-woo .woocommerce-MyAccount-navigation .is-active a{background:var(--fig,#5A2330);color:#FBF6EC!important;font-weight:600}
.sdf-woo .woocommerce-MyAccount-navigation--link-customer-logout a{color:var(--ink-soft,#6F6353)!important}

/* Phones: a grid, not a scrolling row. A menu you have to swipe sideways hides
   half of itself, and "Sign out" was the half that disappeared. Two columns fit
   every item on screen at once; the current one is filled in. */
@media(max-width:819.98px){
  .sdf-woo .woocommerce-MyAccount-navigation ul{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:22px;padding:0}
  .sdf-woo .woocommerce-MyAccount-navigation li{border:0}
  .sdf-woo .woocommerce-MyAccount-navigation a{
    display:flex;align-items:center;justify-content:center;text-align:center;
    min-height:46px;padding:8px 12px;border-radius:12px;font-size:13.5px;font-weight:600;line-height:1.25;
    border:1px solid var(--hairline,rgba(23,20,15,.14));background:var(--paper-raise,#FAF5EA)}
  /* a single trailing item (Sign out, when the list is odd) takes the full row */
  .sdf-woo .woocommerce-MyAccount-navigation li:last-child:nth-child(odd){grid-column:1/-1}
  .sdf-woo .woocommerce-MyAccount-navigation--link-customer-logout a{
    background:transparent;border-style:dashed}
}
@media(max-width:359px){
  .sdf-woo .woocommerce-MyAccount-navigation ul{grid-template-columns:1fr}
  .sdf-woo .woocommerce-MyAccount-navigation li:last-child:nth-child(odd){grid-column:auto}
}

/* orders: a table on desktop, cards on a phone */
@media(max-width:640px){
  .sdf-woo .woocommerce-orders-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .sdf-woo .woocommerce-orders-table,
  .sdf-woo .woocommerce-orders-table tbody,
  .sdf-woo .woocommerce-orders-table tr,
  .sdf-woo .woocommerce-orders-table td{display:block;width:100%}
  .sdf-woo .woocommerce-orders-table{background:none!important;border:0!important;border-radius:0!important}
  .sdf-woo .woocommerce-orders-table tr{
    background:var(--paper-raise,#FAF5EA);border:1px solid var(--hairline,rgba(23,20,15,.12));
    border-radius:14px;padding:6px 4px;margin-bottom:12px}
  .sdf-woo .woocommerce-orders-table td{
    display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    border:0!important;padding:9px 14px!important;text-align:right}
  .sdf-woo .woocommerce-orders-table td::before{
    content:attr(data-title);flex:none;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-soft,#6F6353);text-align:left}
  .sdf-woo .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions{justify-content:flex-end}
  .sdf-woo .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before{display:none}
}

/* empty states and the address card */
.sdf-woo .woocommerce-Address{
  background:var(--paper-raise,#FAF5EA);border:1px solid var(--hairline,rgba(23,20,15,.12));
  border-radius:14px;padding:20px 22px}
.sdf-woo .woocommerce-Address-title h2,
.sdf-woo .woocommerce-Address-title h3{font-family:'Cormorant',serif;font-size:24px;margin:0 0 8px}
.sdf-woo .woocommerce-Address address{font-style:normal;line-height:1.7;color:var(--ink-soft,#6F6353)}
.sdf-woo .woocommerce-Addresses .woocommerce-Address{max-width:520px}