/* ===========================================================================
   Order tracking: the account order list, the tracking view, the public page.
   ---------------------------------------------------------------------------
   The page a customer opens when they are wondering where their parcel is, so
   it is calm before it is clever: the status is the biggest thing on it, the
   estimated date sits right under it, and the journey reads as one thread
   running down the page, solid behind the parcel and faint ahead of it.

   Every colour carries a literal fallback because this stylesheet also loads on
   pages that do not get dist/woocommerce.css.
   ========================================================================= */

.sdf-tr{display:grid;gap:16px;max-width:760px}
.sdf-tr__main,.sdf-tr__side{display:grid;gap:16px;align-content:start;min-width:0}
/* Where the parcel is, and what is in it, side by side once there is room for
   both. The order summary is reference, so it takes the narrower column and
   stays put while the journey is read. */
@media(min-width:1024px){
  .sdf-tr{grid-template-columns:minmax(0,1fr) 344px;align-items:start;gap:20px;max-width:1180px}
  .sdf-tr__side{position:sticky;top:104px}
}
.sdf-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- the status, and the date they are waiting on ---------- */
.sdf-tr__head{
  position:relative;overflow:hidden;
  padding:22px 20px 24px;border-radius:18px;
  background:var(--paper-raise,#FAF5EA);border:1px solid var(--hairline,rgba(23,20,15,.12));
  box-shadow:0 26px 52px -40px rgba(90,35,48,.45)}
/* a soft wash in the tone of the state: reassurance you feel before you read */
.sdf-tr__head::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;
  background:var(--sdf-tone,var(--fig,#5A2330))}
.sdf-tr__head.is-moving{--sdf-tone:var(--fig,#5A2330)}
.sdf-tr__head.is-done{--sdf-tone:var(--pistachio,#7C8A4E)}
.sdf-tr__head.is-warn{--sdf-tone:var(--terracotta,#BE5B34)}
.sdf-tr__head.is-stopped{--sdf-tone:var(--ink-soft,#6F6353)}
@media(min-width:768px){.sdf-tr__head{padding:26px 28px 28px}}

.sdf-tr__eyebrow{
  margin:0 0 8px;font-family:'Hanken Grotesk',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft,#6F6353)}
.sdf-tr__status{
  margin:0;font-family:'Cormorant',Georgia,serif;font-weight:600;letter-spacing:-.01em;
  font-size:clamp(27px,5vw,38px);line-height:1.05;color:var(--ink,#17140F)}
.sdf-tr__note{
  margin:8px 0 0;font-family:'Hanken Grotesk',sans-serif;font-size:14.5px;line-height:1.55;
  color:var(--ink-soft,#6F6353);max-width:52ch}
.sdf-tr__eta{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin:18px 0 0;padding-top:16px;border-top:1px solid var(--hairline,rgba(23,20,15,.12));
  font-family:'Hanken Grotesk',sans-serif;font-size:13px;color:var(--ink-soft,#6F6353)}
.sdf-tr__eta b{
  font-family:'Cormorant',Georgia,serif;font-size:22px;font-weight:600;letter-spacing:0;
  color:var(--sdf-tone,var(--fig,#5A2330))}
.sdf-tr__eta.is-soft{display:block;line-height:1.5;max-width:46ch}
.sdf-tr__notice{
  margin:0;padding:11px 14px;border-radius:12px;
  background:rgba(176,141,62,.1);border:1px solid rgba(176,141,62,.3);
  font-family:'Hanken Grotesk',sans-serif;font-size:13.5px;color:#6b5a48}

/* ---------- cards ---------- */
.sdf-tr__card{
  padding:20px;border-radius:18px;
  background:var(--paper-raise,#FAF5EA);border:1px solid var(--hairline,rgba(23,20,15,.12))}
@media(min-width:768px){.sdf-tr__card{padding:24px 26px}}
.sdf-tr__h{
  margin:0 0 16px;font-family:'Hanken Grotesk',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft,#6F6353)}
.sdf-tr__quiet{margin:0;font-family:'Hanken Grotesk',sans-serif;font-size:14px;line-height:1.55;color:var(--ink-soft,#6F6353)}

/* ---------- the thread ---------- */
.sdf-track{list-style:none;margin:0;padding:0}
.sdf-track__row{position:relative;display:grid;grid-template-columns:22px 1fr;gap:14px;padding-bottom:22px}
.sdf-track__row:last-child{padding-bottom:0}
/* the thread itself, drawn from each dot down to the next */
.sdf-track__row:not(:last-child)::before{
  content:"";position:absolute;left:10px;top:18px;bottom:-4px;width:2px;border-radius:2px;
  background:var(--hairline,rgba(23,20,15,.12))}
.sdf-track__row.is-done:not(:last-child)::before{background:var(--fig,#5A2330);opacity:.55}
.sdf-track__dot{
  position:relative;z-index:1;width:22px;height:22px;border-radius:50%;
  background:var(--paper,#F3EEE1);border:2px solid var(--hairline,rgba(23,20,15,.18));
  display:block;margin-top:1px}
.sdf-track__row.is-done .sdf-track__dot{
  background:var(--fig,#5A2330);border-color:var(--fig,#5A2330);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF6EC' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4.5 4.5L19 6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:12px 12px}
.sdf-track__row.is-current .sdf-track__dot{
  background:var(--paper-raise,#FAF5EA);border-color:var(--fig,#5A2330);
  box-shadow:0 0 0 4px rgba(90,35,48,.13)}
/* one quiet pulse on the step the parcel is at, and only that one */
.sdf-track__row.is-current .sdf-track__dot::after{
  content:"";position:absolute;inset:3px;border-radius:50%;background:var(--fig,#5A2330);
  animation:sdfPulse 2.4s ease-in-out infinite}
@keyframes sdfPulse{0%,100%{transform:scale(.72);opacity:.75}50%{transform:scale(1);opacity:1}}
.sdf-track__row.tone-warn .sdf-track__dot{border-color:var(--terracotta,#BE5B34)}
.sdf-track__row.tone-warn.is-current .sdf-track__dot{box-shadow:0 0 0 4px rgba(190,91,52,.15)}
.sdf-track__row.tone-warn.is-current .sdf-track__dot::after{background:var(--terracotta,#BE5B34)}
.sdf-track__row.tone-stopped .sdf-track__dot{background:var(--ink-soft,#6F6353);border-color:var(--ink-soft,#6F6353);background-image:none}

.sdf-track__body{min-width:0;padding-top:1px}
.sdf-track__label{
  margin:0;font-family:'Hanken Grotesk',sans-serif;font-size:15px;font-weight:600;line-height:1.3;
  color:var(--ink,#17140F)}
.sdf-track__row.is-pending .sdf-track__label{color:var(--ink-soft,#6F6353);font-weight:500}
.sdf-track__row.is-current .sdf-track__label{color:var(--fig,#5A2330)}
.sdf-track__time,.sdf-track__detail{
  margin:3px 0 0;font-family:'Hanken Grotesk',sans-serif;font-size:12.5px;line-height:1.45;
  color:var(--ink-soft,#6F6353)}
.sdf-track__detail{font-style:italic}

/* ---------- shipment ---------- */
.sdf-ship__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0}
.sdf-ship__grid dt{
  margin:0 0 4px;font-family:'Hanken Grotesk',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft,#6F6353)}
.sdf-ship__grid dd{margin:0;font-family:'Hanken Grotesk',sans-serif;font-size:15px;font-weight:600;color:var(--ink,#17140F)}
.sdf-ship__awb{font-variant-numeric:tabular-nums;letter-spacing:.04em;word-break:break-all}
.sdf-ship__actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px}

.sdf-tr__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 22px;border-radius:999px;border:0;cursor:pointer;
  background:var(--fig,#5A2330);color:#FBF6EC!important;
  font-family:'Hanken Grotesk',sans-serif;font-size:14px;font-weight:600;
  text-decoration:none!important;
  transition:background-color .25s,color .25s,transform .25s cubic-bezier(.22,1,.36,1)}
.sdf-tr__btn:hover{background:var(--gold,#B08D3E);color:var(--ink,#17140F)!important;transform:translateY(-1px)}
.sdf-tr__btn:focus-visible{outline:2px solid var(--fig,#5A2330);outline-offset:3px}
.sdf-tr__refresh{margin:0}
/* A card heading with its own action at the end of the line. */
.sdf-tr__hrow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sdf-tr__hrow .sdf-tr__h{margin-bottom:0}
/* Refresh is one button with one arrow on it: the label would be the third
   time the same card says the word tracking. */
.sdf-tr__refreshbtn{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:36px;height:36px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--hairline,rgba(23,20,15,.18));background:var(--paper,#F3EEE1);color:var(--ink-soft,#6F6353);
  transition:border-color .2s,color .2s,background-color .2s}
.sdf-tr__refreshbtn svg{
  width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.sdf-tr__refreshbtn:hover{border-color:var(--fig,#5A2330);color:var(--fig,#5A2330);background:var(--paper-raise,#FAF5EA)}
.sdf-tr__refreshbtn:hover svg{transform:rotate(-90deg)}
.sdf-tr__refreshbtn:focus-visible{outline:2px solid var(--fig,#5A2330);outline-offset:3px}
/* Pressed: js/feedback.js puts the site's own busy spinner on it and dims the
   arrow underneath, so there is no second spinner competing here. */
.sdf-tr__refreshbtn[aria-busy="true"]{pointer-events:none;color:var(--fig,#5A2330)}
.sdf-tr__link{
  border:0;background:none;padding:0;cursor:pointer;
  font-family:'Hanken Grotesk',sans-serif;font-size:13.5px;font-weight:600;
  color:var(--ink-soft,#6F6353);text-decoration:underline;text-underline-offset:3px;
  transition:color .2s}
.sdf-tr__link:hover{color:var(--fig,#5A2330)}
.sdf-tr__link:focus-visible{outline:2px solid var(--fig,#5A2330);outline-offset:3px;border-radius:6px}
.sdf-tr__link[aria-busy="true"]{opacity:.6;pointer-events:none}

/* ---------- items, totals, address ---------- */
.sdf-items{list-style:none;margin:0;padding:0}
.sdf-item{display:flex;align-items:center;gap:13px;padding:12px 0;border-bottom:1px solid var(--hairline,rgba(23,20,15,.1))}
.sdf-item:first-child{padding-top:0}
.sdf-item img,.sdf-item__noimg{
  flex:none;width:52px;height:52px;border-radius:10px;object-fit:cover;
  background:var(--paper,#F3EEE1);border:1px solid var(--hairline,rgba(23,20,15,.1))}
.sdf-item__body{flex:1 1 auto;min-width:0}
.sdf-item__name{
  margin:0;font-family:'Cormorant',Georgia,serif;font-size:17px;font-weight:600;line-height:1.22;
  color:var(--ink,#17140F)}
.sdf-item__qty{margin:2px 0 0;font-family:'Hanken Grotesk',sans-serif;font-size:12.5px;color:var(--ink-soft,#6F6353)}
.sdf-item__price{margin:0;flex:none;font-family:'Hanken Grotesk',sans-serif;font-size:14.5px;font-weight:600;white-space:nowrap}

.sdf-totals{margin:16px 0 0;font-family:'Hanken Grotesk',sans-serif}
.sdf-totals > div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:6px 0}
.sdf-totals dt{margin:0;font-size:14px;color:var(--ink-soft,#6F6353)}
.sdf-totals dd{margin:0;font-size:14px;font-weight:600;color:var(--ink,#17140F)}
.sdf-totals__sum{margin-top:8px;padding-top:12px!important;border-top:1px solid var(--hairline,rgba(23,20,15,.12))}
.sdf-totals__sum dt{font-size:16px;font-weight:600;color:var(--ink,#17140F)}
.sdf-totals__sum dd{font-family:'Cormorant',Georgia,serif;font-size:22px;color:var(--fig,#5A2330)}

.sdf-addr{display:grid;gap:2px;font-style:normal;font-family:'Hanken Grotesk',sans-serif;font-size:14.5px;line-height:1.5;color:var(--ink-soft,#6F6353)}
.sdf-addr b{font-weight:600;color:var(--ink,#17140F)}

/* ---------- the account order list ---------- */
.sdf-orders{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.sdf-ocard{
  padding:18px;border-radius:18px;
  background:var(--paper-raise,#FAF5EA);border:1px solid var(--hairline,rgba(23,20,15,.12));
  transition:border-color .25s,box-shadow .25s}
.sdf-ocard:hover{border-color:rgba(90,35,48,.24);box-shadow:0 20px 44px -34px rgba(90,35,48,.5)}
@media(min-width:768px){.sdf-ocard{padding:22px 24px}}
.sdf-ocard__top{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.sdf-ocard__num{
  margin:0;font-family:'Hanken Grotesk',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.04em;color:var(--ink,#17140F);font-variant-numeric:tabular-nums}
.sdf-ocard__date{margin:2px 0 0;font-family:'Hanken Grotesk',sans-serif;font-size:12.5px;color:var(--ink-soft,#6F6353)}
.sdf-ocard__total{margin:0;font-family:'Cormorant',Georgia,serif;font-size:22px;font-weight:600;color:var(--ink,#17140F)}

.sdf-ocard__body{display:flex;align-items:center;gap:13px;margin-top:14px}
.sdf-ocard__thumbs{display:flex;flex:none}
.sdf-ocard__thumbs img{
  width:46px;height:46px;border-radius:10px;object-fit:cover;
  background:var(--paper,#F3EEE1);border:1px solid var(--hairline,rgba(23,20,15,.1))}
.sdf-ocard__thumbs img + img{margin-left:-14px;box-shadow:-2px 0 0 var(--paper-raise,#FAF5EA)}
.sdf-ocard__what{min-width:0}
.sdf-ocard__name{
  margin:0;font-family:'Cormorant',Georgia,serif;font-size:17px;font-weight:600;line-height:1.22;
  color:var(--ink,#17140F);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sdf-ocard__count{margin:2px 0 0;font-family:'Hanken Grotesk',sans-serif;font-size:12.5px;color:var(--ink-soft,#6F6353)}

.sdf-ocard__status{
  display:flex;align-items:center;gap:9px;margin:16px 0 0;
  font-family:'Hanken Grotesk',sans-serif;font-size:14.5px;font-weight:600;color:var(--ink,#17140F)}
.sdf-ocard__dot{
  flex:none;width:9px;height:9px;border-radius:50%;background:var(--fig,#5A2330);
  box-shadow:0 0 0 4px rgba(90,35,48,.12)}
.sdf-ocard.tone-done .sdf-ocard__dot{background:var(--pistachio,#7C8A4E);box-shadow:0 0 0 4px rgba(124,138,78,.16)}
.sdf-ocard.tone-warn .sdf-ocard__dot{background:var(--terracotta,#BE5B34);box-shadow:0 0 0 4px rgba(190,91,52,.16)}
.sdf-ocard.tone-stopped .sdf-ocard__dot{background:var(--ink-soft,#6F6353);box-shadow:0 0 0 4px rgba(111,99,83,.14)}
.sdf-ocard__eta{margin:5px 0 0;padding-left:18px;font-family:'Hanken Grotesk',sans-serif;font-size:13px;color:var(--ink-soft,#6F6353)}
.sdf-ocard__eta b{color:var(--ink,#17140F);font-weight:600}
.sdf-ocard__cta{width:100%;margin-top:16px}
@media(min-width:560px){.sdf-ocard__cta{width:auto;min-width:200px}}

.sdf-orders__empty{
  padding:26px 20px;border-radius:18px;text-align:center;
  background:var(--paper-raise,#FAF5EA);border:1px dashed var(--hairline,rgba(23,20,15,.2))}
.sdf-orders__empty p{margin:0 0 16px;font-family:'Hanken Grotesk',sans-serif;font-size:15px;color:var(--ink-soft,#6F6353)}


/* ---------- the lookup page ----------
   padding-block only: .wrap owns the side padding, and a padding shorthand
   here would quietly wipe it (which is exactly what the old hero did). */
.sdf-lookup-page{max-width:520px;margin-inline:auto;padding-block:clamp(26px,6vw,54px) clamp(52px,10vw,96px)}
.sdf-lookup-page__crumb{margin:0 0 18px;font-family:'Hanken Grotesk',sans-serif;font-size:13px;color:var(--ink-soft,#6F6353)}
.sdf-lookup-page__h{
  margin:0 0 22px;font-family:'Cormorant',Georgia,serif;font-weight:600;letter-spacing:-.01em;
  font-size:clamp(32px,6vw,46px);line-height:1.03;color:var(--ink,#17140F)}
.sdf-lookup{max-width:none}

/* ---------- the public lookup ---------- */
.sdf-lookup{
  max-width:460px;padding:22px 20px 24px;border-radius:18px;
  background:var(--paper-raise,#FAF5EA);border:1px solid var(--hairline,rgba(23,20,15,.12));
  box-shadow:0 30px 60px -44px rgba(90,35,48,.5)}
@media(min-width:768px){.sdf-lookup{padding:28px 28px 30px}}
.sdf-lookup__row{display:grid;gap:6px;margin-bottom:14px}
.sdf-lookup label{
  font-family:'Hanken Grotesk',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft,#6F6353)}
.sdf-lookup input{
  width:100%;height:52px;padding:0 16px;
  background:var(--paper,#F3EEE1);border:1px solid rgba(36,26,18,.14);border-radius:12px;
  font-family:'Hanken Grotesk',sans-serif;font-size:15.5px;color:var(--ink,#17140F)}
.sdf-lookup input:focus{outline:none;border-color:var(--fig,#5A2330);box-shadow:0 0 0 3px rgba(90,35,48,.13)}
.sdf-lookup .sdf-tr__btn{width:100%;margin-top:4px;min-height:52px}
.sdf-lookup__help{margin:14px 0 0;font-family:'Hanken Grotesk',sans-serif;font-size:12.5px;line-height:1.55;color:var(--ink-soft,#6F6353)}
.sdf-lookup__err{
  margin:0 0 16px;padding:12px 14px;border-radius:12px;
  background:rgba(90,35,48,.07);border:1px solid rgba(90,35,48,.28);
  font-family:'Hanken Grotesk',sans-serif;font-size:13.5px;line-height:1.5;color:var(--fig,#5A2330)}
.sdf-again{margin:22px 0 0;font-family:'Hanken Grotesk',sans-serif;font-size:13.5px;color:var(--ink-soft,#6F6353)}

@media(prefers-reduced-motion:reduce){
  .sdf-track__row.is-current .sdf-track__dot::after{animation:none}
  .sdf-tr__btn,.sdf-ocard,.sdf-tr__link,.sdf-tr__refreshbtn svg{transition:none}
  .sdf-tr__btn:hover{transform:none}
  .sdf-tr__refreshbtn:hover svg{transform:none}
}