/* Customer account after "Flower Shop.pdf": menu on the left, light panels on the right. */
.account-page{--page:#fdfdfd}
.account-layout{display:grid;grid-template-columns:268px minmax(0,1fr);gap:40px;align-items:start;margin-block:32px 24px}
.account-sidebar{position:sticky;top:100px;display:grid;align-content:start;gap:24px;padding-right:24px;border-right:1px solid var(--line)}
.account-nav{display:grid;gap:4px}
.account-nav a,.account-nav button{display:flex;align-items:center;gap:14px;width:100%;min-height:48px;padding:0 16px;border-radius:10px;font:500 16px/1.2 var(--sans);color:var(--text);text-align:left;transition:background-color .15s,color .15s}
.account-nav .icon{width:22px;height:22px;stroke-width:1.7}
.account-nav a:hover,.account-nav button:hover{background:var(--pdf-cream,#f8f6f2)}
.account-nav a[aria-current="page"]{background:var(--forest);color:#fff}
.account-nav form{margin:0}
.account-help{display:grid;align-content:start;gap:16px;padding:18px;border:1px solid var(--border);border-radius:16px;background:#fbf8f6}
.account-help-head{display:flex;gap:12px;align-items:flex-start}
.account-help img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.account-help h2{font:600 18px/1.25 var(--pdf-serif,"Lora",serif);color:var(--forest)}
.account-help p{margin-top:4px;font-size:13px;line-height:1.4;color:var(--muted)}
.account-help .button{border-radius:8px}
.account-main{display:grid;gap:20px;min-width:0}
.account-main>section,.account-main>.account-panel{min-width:0}
.account-head{display:grid;gap:6px;margin-bottom:6px}
.account-head h1{font:500 clamp(30px,2.8vw,40px)/1.2 var(--pdf-serif,"Lora",serif);letter-spacing:0;color:var(--forest)}
.account-head p{font-size:16px;color:var(--muted)}
.account-head-actions{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.account-head-actions .button{border-radius:8px}
.account-main .back-link{display:inline-flex;align-items:center;gap:8px;margin:0;font-weight:600;color:var(--forest)}

/* Panels */
.account-panel{padding:20px;border:1px solid #eceae4;border-radius:16px;background:var(--pdf-cream,#f8f6f2)}
.account-panel-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.account-panel-head h2{font:500 24px/1.25 var(--pdf-serif,"Lora",serif);color:var(--forest)}
.account-panel-head-actions .button{margin-left:auto;border-radius:8px}
.account-panel-icon{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;background:#fbe4e4;color:#b5283a}
.account-panel-icon .icon{width:24px;height:24px}
.account-empty{text-align:center}
.account-empty p:first-child{font-weight:600;color:var(--text-soft)}

/* Loyalty card */
.loyalty-pass{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px;padding:20px 24px;border:1px solid #e6e3dc;border-radius:16px;background:var(--pdf-cream,#f8f6f2)}
.loyalty-pass-emblem{width:96px;height:auto;padding-right:20px;border-right:1px solid var(--border-strong);mix-blend-mode:multiply}
.loyalty-pass-body h2{font:500 26px/1.2 var(--pdf-serif,"Lora",serif);color:var(--forest)}
.loyalty-pass-body>p{margin-top:6px;font-size:15px;color:var(--text-soft)}
.loyalty-pass-slots{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;margin:16px 0 0;padding:0;list-style:none}
.loyalty-pass .loyalty-stamp{display:grid;justify-items:center;gap:6px}
.loyalty-pass .loyalty-stamp img{width:40px;height:58px;object-fit:contain;mix-blend-mode:multiply;opacity:.55}
.loyalty-pass .loyalty-stamp.is-done img{opacity:1}
.loyalty-pass .loyalty-stamp span{display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--text-soft);border-radius:50%;font:500 12px/1 var(--sans);color:var(--text)}
.loyalty-pass-reward{display:grid;grid-template-columns:110px minmax(0,190px);align-items:center;gap:14px;padding-left:24px;border-left:1px solid var(--border-strong)}
.loyalty-pass-reward img{width:110px;height:auto;mix-blend-mode:multiply}
.loyalty-pass-reward h3{font:500 24px/1.2 var(--pdf-serif,"Lora",serif);color:var(--forest)}
.loyalty-pass-reward p{margin-top:6px;font-size:14px;color:var(--text-soft)}
.loyalty-pass-reward .button{margin-top:14px;border-radius:8px}

/* Overview */
.account-shortcuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.account-shortcuts a{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;background:var(--pdf-cream,#f8f6f2);transition:background-color .15s}
.account-shortcuts a:hover{background:#f1eee6}
.account-shortcuts a>span:nth-child(2){display:grid;flex:1;gap:2px}
.account-shortcuts strong{font:600 17px/1.25 var(--sans);color:var(--text)}
.account-shortcuts small{font-size:14px;color:var(--text-soft)}
.account-shortcut-icon{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;background:#fbe4e4;color:#b5283a}
.account-shortcuts a>.icon{width:18px;height:18px;color:var(--text)}
.account-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.account-main .referral-card{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:0;background:#fcf3f2}
.account-main .referral-card .referral-controls{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.account-main .referral-card .referral-controls .button{width:100%}
.account-main .referral-card .referral-controls>.icon{top:15px}
.account-main .referral-card .referral-qr summary{min-height:40px}
.referral-card-head{display:grid;grid-template-columns:minmax(0,1fr) 110px;align-items:center;gap:12px}
.referral-card-head .account-panel-head{margin:0}
.referral-card-art{width:110px;height:auto;mix-blend-mode:multiply}
.referral-card p{font-size:15px;line-height:1.45;color:var(--text-soft)}
.referral-card .referral-controls{position:relative;align-items:center}
.referral-card .referral-controls>.icon{position:absolute;left:14px;width:18px;height:18px;pointer-events:none}
.referral-card .referral-controls input{padding-left:40px;border-radius:10px;background:#fff}
.referral-card .referral-controls .button{border-radius:8px}
.coming-dates{display:grid;gap:10px;margin:0 0 12px;padding:0;list-style:none}
.coming-dates li{display:grid;grid-template-columns:90px minmax(0,1fr) auto;align-items:baseline;gap:10px;padding:12px 14px;border-radius:12px;background:#fff}
.coming-dates strong{color:var(--forest)}
.coming-dates small{color:var(--muted)}
.account-dates-panel .button{border-radius:8px}
.account-last-order{display:flex;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);font-weight:500}
.account-last-order small{color:var(--muted)}

/* Orders */
.account-order{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:20px;align-items:center;margin-bottom:16px;padding:16px;border-radius:16px;background:var(--pdf-cream,#f8f6f2)}
.account-order-photo{display:block;width:150px;height:130px;border-radius:12px;overflow:hidden;background:#ece8df}
.account-order-photo img{width:100%;height:100%;object-fit:cover}
.account-order-body{display:grid;gap:6px;align-content:center}
.account-order-body h2{font:600 22px/1.2 var(--sans);color:var(--text)}
.account-order-body h2 a:hover{color:var(--forest)}
.account-order-body p{font-size:16px;color:var(--text-soft)}
.account-order-part{font-size:14px!important}
.account-order-side{display:grid;justify-items:end;gap:12px}
.account-order-side .money{font:700 22px/1.2 var(--pdf-num,var(--sans))}
.account-order-statuses{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.account-order-side .button{border-radius:8px}
.status-chip.status-completed{background:#e2f2db;color:#2d5a22}
.status-chip.status-cancelled{background:#fde4e4;color:#b5283a}

/* Order */
.account-order-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.95fr);gap:24px;align-items:start}
.account-order-detail+.account-order-detail{margin-top:8px}
.order-part{background:#fff;border-color:var(--border)}
.order-part-title{margin-bottom:12px;font:500 22px/1.2 var(--pdf-serif,"Lora",serif);color:var(--forest)}
.order-items{display:grid;gap:14px;margin:0;padding:0 0 18px;list-style:none;border-bottom:1px solid var(--border)}
.order-items li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px}
.order-items img,.order-item-noimage{width:120px;height:120px;border-radius:12px;object-fit:cover;background:var(--cream)}
.order-items h3{font:600 18px/1.3 var(--sans);color:var(--text)}
.order-items h3 a:hover{color:var(--forest)}
.order-items .muted{margin-top:4px}
.order-item-size{display:inline-block;margin-top:8px;padding:4px 10px;border-radius:999px;background:#fbe4e4;font-size:12px;font-weight:500}
.order-item-price{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:10px}
.order-item-price strong{font:700 20px/1.2 var(--pdf-num,var(--sans))}
.order-facts{display:grid;gap:18px;margin:18px 0 0}
.order-facts dt{margin-bottom:8px;font:600 18px/1.3 var(--sans);color:var(--text)}
.order-facts dd{display:flex;align-items:flex-start;gap:14px;margin:0}
.order-facts dd>span:last-child{display:grid;gap:4px}
.order-facts strong{font-weight:600}
.order-facts small{font-size:14px;color:var(--text-soft)}
.order-facts small.notice{display:block;margin-top:6px}
.order-fact-icon{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:#fbefef;color:var(--text)}
.order-fact-icon .icon{width:20px;height:20px}
.order-totals{margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}
.order-status-column{position:sticky;top:100px;display:grid;gap:16px}
.order-status-card{display:flex;gap:18px;align-items:flex-start;padding:22px;border:1px solid #d9e6d2;border-radius:16px;background:#eef4ea}
.order-status-card h2{font:600 22px/1.25 var(--sans);color:var(--text)}
.order-status-card p{margin-top:6px;color:var(--text-soft)}
.order-status-mark{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:50%;background:var(--forest);color:#fff}
.order-status-mark .icon{width:26px;height:26px;stroke-width:2.2}
.order-status-card.status-cancelled{border-color:#f2cfcf;background:#fdf1f1}
.order-status-card.status-cancelled .order-status-mark{background:#b5283a}
.order-timeline-card{background:#fff;border-color:var(--border)}
.order-timeline-card h2{margin-bottom:16px;font:600 20px/1.25 var(--sans);color:var(--text)}
.order-timeline{display:grid;margin:0;padding:0;list-style:none}
.order-timeline li{position:relative;display:flex;gap:16px;padding-bottom:22px}
.order-timeline li:last-child{padding-bottom:0}
.order-timeline li:not(:last-child)::before{content:"";position:absolute;left:15px;top:32px;bottom:0;width:2px;background:var(--border-strong)}
.order-timeline li.is-done:not(:last-child)::before{background:var(--forest)}
.order-timeline-dot{display:grid;place-items:center;flex:none;width:32px;height:32px;border:2px solid var(--border-strong);border-radius:50%;background:#fff;color:#fff}
.order-timeline li.is-done .order-timeline-dot{border-color:var(--forest);background:var(--forest)}
.order-timeline li.is-cancelled .order-timeline-dot{border-color:#b5283a;background:#b5283a}
.order-timeline-dot .icon{width:16px;height:16px;stroke-width:2.6}
.order-timeline div{display:grid;gap:2px;padding-top:4px}
.order-timeline strong{font-weight:600}
.order-timeline small{font-size:13px;color:var(--muted)}
.order-timeline li:not(.is-done) strong{color:var(--muted);font-weight:500}
.order-status-column .button{border-radius:8px}

/* Special dates */
.special-dates{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.special-date{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:18px;align-items:center;padding:14px 18px}
.special-date-day{display:grid;justify-items:center;padding:8px 4px;border-radius:12px;background:#fff}
.special-date-day strong{font:600 26px/1 var(--pdf-serif,"Lora",serif);color:var(--forest)}
.special-date-day small{font-size:12px;color:var(--muted)}
.special-date h2{font:600 18px/1.3 var(--sans);color:var(--text)}
.special-date p{margin-top:2px;color:var(--text-soft)}
.special-date-actions,.saved-address-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 16px}
.special-date-actions form,.saved-address-actions form{margin:0}

/* Forms */
.account-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px}
.account-form-grid .field{margin-bottom:12px}
.account-form-grid .checkbox-field,.account-form-grid .address-field,.account-form-grid .errorlist.nonfield{grid-column:1/-1}
.account-form-grid input:not([type=checkbox]),.account-form-grid select{background:#fff;border-radius:10px}
.account-form-row{grid-template-columns:repeat(3,minmax(0,1fr))}
.account-form-actions{grid-column:1/-1;display:flex;gap:12px}
.account-form-actions .button{border-radius:8px}
.account-form-grid .field:has([name=address]){grid-column:1/-1}

/* Saved addresses */
.saved-address-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.saved-address-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 18px;border:1px solid var(--border-strong);border-radius:12px;background:#fff}
.saved-address-icon .icon{width:24px;height:24px}
.saved-address-list h3{display:flex;align-items:center;gap:10px;font:600 17px/1.3 var(--sans);color:var(--text)}
.saved-address-list p{margin-top:2px;color:var(--text-soft)}

/* Favourites and the gift choice inside the account */
.account-main .favorites-page .product-grid,.account-main .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.account-main .loyalty-rules{margin-top:20px}

@media(max-width:1180px){
  .account-layout{grid-template-columns:230px minmax(0,1fr);gap:28px}
  .loyalty-pass{grid-template-columns:minmax(0,1fr)}
  .loyalty-pass-emblem{display:none}
  .loyalty-pass-reward{padding:18px 0 0;border-left:0;border-top:1px solid var(--border-strong);grid-template-columns:90px minmax(0,1fr)}
  .account-pair,.account-order-detail{grid-template-columns:minmax(0,1fr)}
  .order-status-column{position:static}
}
@media(max-width:1023px){
  .account-shortcuts{grid-template-columns:minmax(0,1fr)}
  .account-main .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:759px){
  .account-layout{display:flex;flex-direction:column;gap:18px;margin-top:16px}
  .account-sidebar{display:contents}
  .account-nav{order:0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter)}
  .account-nav::-webkit-scrollbar{display:none}
  .account-nav a,.account-nav button{width:auto;min-height:40px;padding:0 14px;border:1px solid var(--border);border-radius:999px;white-space:nowrap;font-size:14px}
  .account-nav .icon{width:18px;height:18px}
  .account-nav form{flex:none}
  .account-main{order:1;width:100%}
  .account-help{order:2;width:100%}
  .account-head-actions{flex-direction:column}
  .loyalty-pass{padding:16px}
  .loyalty-pass-body h2{font-size:22px}
  .loyalty-pass-slots{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 6px}
  .account-order{grid-template-columns:96px minmax(0,1fr);gap:14px}
  .account-order-photo{width:96px;height:96px}
  .account-order-body h2{font-size:18px}
  .account-order-body p{font-size:14px}
  .account-order-side{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
  .order-items li{grid-template-columns:84px minmax(0,1fr)}
  .order-items img,.order-item-noimage{width:84px;height:84px}
  .special-date{grid-template-columns:60px minmax(0,1fr)}
  .special-date-actions{grid-column:1/-1;justify-content:flex-start}
  .saved-address-list li{grid-template-columns:auto minmax(0,1fr)}
  .saved-address-actions{grid-column:1/-1;justify-content:flex-start}
  .account-form-grid,.account-form-row{grid-template-columns:minmax(0,1fr)}
  .coming-dates li{grid-template-columns:minmax(0,1fr) auto}
  .coming-dates li span{grid-column:1/-1;grid-row:2}
  .account-main .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Sign-in and sign-up after "Flower Shop.pdf": florist photo on the left, tabs on the right. */
.auth-page{--page:#fdfdfd}
.auth-page .auth-layout{display:grid;grid-template-columns:49% minmax(0,1fr);min-height:640px}
.auth-page .auth-photo{width:100%;height:0;min-height:100%;object-fit:cover;object-position:50% 70%}
.auth-page .auth-content{align-self:center;width:min(470px,100% - 48px);margin:48px 0 48px clamp(24px,4vw,56px)}
.auth-page .auth-eyebrow{font:500 15px/1.4 var(--sans);letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.auth-page .auth-content h1{margin-top:8px;font:500 clamp(34px,3.4vw,46px)/1.2 var(--pdf-serif,"Lora",serif);letter-spacing:0;color:var(--forest)}
.auth-page .auth-intro{max-width:360px;margin-top:10px;font-size:16px;line-height:1.45;color:var(--muted)}
.auth-page .auth-tabs{display:grid;grid-template-columns:1fr 1fr;margin-top:28px}
.auth-page .auth-tabs [role=tab]{display:grid;place-items:center;height:46px;border-bottom:1px solid var(--border-strong);font:500 17px/1 var(--pdf-serif,"Lora",serif);color:var(--text-soft)}
.auth-page .auth-tabs [aria-selected=true]{border-bottom:2px solid var(--forest);color:var(--text)}
.auth-page .auth-panel{display:grid;gap:14px;margin-top:28px}
.auth-page .auth-form{display:grid;gap:4px}
.auth-page .auth-form .field{margin-bottom:12px}
.auth-page .auth-form .field>label{font:600 16px/1.4 var(--sans);color:var(--text)}
.auth-page .auth-form input:not([type=checkbox]){min-height:48px;border-radius:10px;background:#fbfaf7}
.auth-page .auth-form .button{min-height:52px;border-radius:8px;gap:10px}
.auth-page .auth-form .muted-link{justify-self:start;margin-top:6px}
.auth-page .auth-help{font-size:14px;color:var(--muted)}
@media(max-width:759px){
  .auth-page .auth-layout{grid-template-columns:minmax(0,1fr);min-height:0}
  .auth-page .auth-photo{height:280px;min-height:0;object-position:50% 40%}
  .auth-page .auth-content{width:auto;margin:24px var(--gutter) 32px}
  .auth-page .auth-content h1{font-size:32px}
}