/* Shared photo frames preserve the approved images while loading lighter files. */
.photo-window{position:relative;overflow:hidden;background:#fff;isolation:isolate}
.photo-window img{position:absolute;display:block;max-width:none;height:auto}
.photo-clean-corner{position:absolute;right:0;top:0;background:#fff;pointer-events:none}
.mobile-nav,.mobile-back,.recipe-tabs,.ingredient-continue,.basket-preview-toggle,.filters-toggle{display:none}
.recipe-overview{display:grid;grid-template-columns:260px minmax(0,1fr);align-items:center;gap:34px;margin:28px 0 26px}
.recipe-overview-copy{min-width:0}
.recipe-overview .recipe-category{display:inline-block;color:var(--gold);font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px}
.recipe-overview h1{font-size:40px;line-height:1.2}
.recipe-overview .recipe-stats{margin:15px 0 0}
.recipe-panels{margin-top:0}
.recipe-panels .ingredients-panel{margin-top:0}

@media(max-width:700px){
  :root{--app-header-height:64px;--app-nav-height:74px;--muted:#796b5d}
  html{scroll-padding-top:calc(var(--app-header-height) + env(safe-area-inset-top));-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{font-size:16px;padding-bottom:calc(var(--app-nav-height) + env(safe-area-inset-bottom));overflow-wrap:break-word}
  button,a,input{-webkit-tap-highlight-color:transparent}
  .site-header{position:sticky;top:0;z-index:40;padding-top:env(safe-area-inset-top);background:#fffdf9}
  .header-inner{min-height:var(--app-header-height);padding:9px max(16px,env(safe-area-inset-right)) 9px max(16px,env(safe-area-inset-left));justify-content:flex-start;gap:11px}
  .brand{gap:9px;min-width:0}
  .brand strong{font-size:22px;letter-spacing:-.7px}
  .brand small{font-size:7px;letter-spacing:1.5px;margin-top:4px}
  .brand-mark{width:31px;height:31px;flex-shrink:0}
  .main-nav{display:none}
  .mobile-back{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--brown)}
  .mobile-back .icon{width:21px;height:21px}
  .mobile-nav{position:fixed;z-index:50;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;min-height:var(--app-nav-height);padding:7px max(12px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:#fffdf9;border-top:1px solid var(--line);box-shadow:0 -6px 22px #49311f06}
  .mobile-nav a{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;min-height:58px;border-radius:13px;color:#8a7b6d;font-size:11px;font-weight:600}
  .mobile-nav a .icon{width:23px;height:23px}
  .mobile-nav a.active{background:#f4ecdf;color:var(--brown)}
  .mobile-count{position:absolute;top:3px;left:calc(50% + 7px);min-width:17px;height:17px;display:grid;place-items:center;padding:0 4px;border-radius:20px;background:var(--brown);color:#fff;font-size:9px;border:2px solid #fffdf9}
  #main{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));min-height:calc(100svh - var(--app-header-height) - var(--app-nav-height) - 85px)}
  .welcome{padding:22px 0 17px}
  .welcome .eyebrow{display:none}
  .eyebrow{font-size:10px;letter-spacing:1.5px;margin-bottom:10px;color:#977038}
  .welcome h1{font-size:32px;line-height:1.2;letter-spacing:-1.1px;max-width:390px}
  .desktop-break{display:none}
  .welcome p{font-size:14px;line-height:1.65;margin-top:12px;color:#7e7062}
  .tools-row{display:grid;grid-template-columns:minmax(0,1fr) 52px;align-items:start;gap:0 9px;margin-bottom:15px}
  .filters-toggle{display:grid;place-items:center;min-height:52px;width:52px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--brown)}
  .filters-toggle .icon{width:21px;height:21px}
  .filters-toggle.has-filter{background:#f4ecdf;border-color:#d6b78e}
  .search-box{min-height:52px;padding:12px 14px;border-radius:12px}
  .search-box .icon{width:19px;height:19px;flex-shrink:0}
  .search-box input{font-size:16px;min-height:25px}
  .search-box input::placeholder{font-size:14px;color:#948575}
  .overall-progress{grid-column:1/-1;font-size:12px;color:#7d715f;margin-top:12px;white-space:normal}
  .filters{display:none;padding-bottom:15px;gap:8px;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
  #main.filters-open .filters{display:flex}
  .chip{min-height:44px;font-size:12px;padding:10px 14px;scroll-snap-align:start}
  .section-topline{margin:22px 0 16px;align-items:baseline}
  .section-topline h2{font-size:22px}
  .section-topline>span{font-size:11px;color:#8a7a68}
  .basket-grid{grid-template-columns:1fr;gap:14px;margin-bottom:30px}
  .basket-card{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:14px;padding:12px;border-radius:16px;min-height:151px}
  .basket-card-visual{display:flex;align-items:center;justify-content:center;padding:8px 0;background:var(--soft);border-radius:11px;overflow:hidden;min-width:0}
  .basket-card .basket-art{flex-shrink:0;width:100%}
  .basket-card-body{padding:2px 0;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
  .occasion-label{font-size:10px;line-height:1.45;padding:4px 8px;max-width:100%}
  .occasion-label .icon{width:12px;height:12px;flex-shrink:0}
  .basket-title{font-size:21px;line-height:1.25;letter-spacing:-.5px;margin:8px 0}
  .basket-description{display:none}
  .card-bottom{align-self:stretch;font-size:11px;padding-top:9px;margin-top:auto;gap:6px}
  .card-bottom>span:first-child{flex-wrap:wrap;gap:4px}
  .card-bottom .icon{width:14px;height:14px;flex-shrink:0}
  .round-arrow{width:29px;height:29px;flex-shrink:0}
  .tiny-progress{align-self:stretch;margin-top:9px}
  #main[data-view="basket"]>.bread,#main[data-view="recipe"]>.bread{display:none}
  .basket-intro{display:block;margin:23px 0}
  .basket-intro h1{font-size:32px;line-height:1.2;margin:12px 0}
  .basket-intro p{font-size:14px;line-height:1.65;color:#7d6e5e}
  .intro-hint{font-size:13px;line-height:1.5;margin-top:14px;color:#805e3e}
  .intro-hint .icon{width:18px;height:18px;flex-shrink:0}
  .basket-preview-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;font-size:12px;font-weight:600;margin-top:13px;padding:9px 13px;border:1px solid #e1d4c1;border-radius:10px;background:#fffdf8;color:var(--brown)}
  .basket-preview-toggle .icon{width:18px;height:18px}
  .basket-intro-art{display:none;padding:18px 0 2px;margin:0;width:100%;max-width:none}
  .basket-intro-art.is-open{display:block}
  .basket-bar{align-items:center;gap:12px;margin-bottom:16px;padding-bottom:16px}
  .basket-bar h2{font-size:23px;line-height:1.3}
  .basket-bar p{font-size:12px;color:#8a7863;line-height:1.6}
  .progress-tag{font-size:11px;padding:7px 9px;gap:5px}
  .progress-tag .icon{width:14px;height:14px}
  .product-grid{grid-template-columns:1fr;gap:13px;margin-bottom:25px}
  .product-card{border-radius:15px}
  .product-link{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:15px;padding:16px;min-height:145px}
  .product-image{padding:0;min-width:0;align-self:center}
  .product-body{padding:0 25px 0 0;min-width:0}
  .product-body h3{font-size:19px;line-height:1.3;min-height:0;margin:0 0 9px;letter-spacing:-.4px}
  .product-meta{font-size:12px;line-height:1.55;gap:5px;color:#8a7762}
  .product-meta .icon{width:14px;height:14px;flex-shrink:0}
  .recipe-cta{font-size:12px;line-height:1.5;padding-top:10px;margin-top:10px;min-height:36px;gap:10px}
  .recipe-cta .icon{width:17px;height:17px}
  .favorite-button{top:8px;right:7px;width:44px;height:44px;border-color:transparent;background:#fffefceb}
  .favorite-button .icon{width:20px;height:20px}
  .favorite-button.saved{border-color:#f0dce1}
  .done-flag{left:10px;top:8px;font-size:9px;padding:4px 7px}
  .done-flag .icon{width:12px;height:12px}
  .assembly-card{padding:20px 17px;margin-bottom:30px}
  .assembly-card h3{font-size:21px}
  .assembly-card p{font-size:14px;line-height:1.7;color:#806d56}
  .recipe-toolbar{margin-top:13px;min-height:48px;gap:8px}
  .back-link{font-size:13px;min-height:44px;gap:6px}
  .back-link .icon{width:18px;height:18px}
  .toolbar-actions{gap:5px}
  .toolbar-actions .button{min-height:44px;min-width:44px;padding:9px 12px;font-size:12px;border-radius:11px}
  .toolbar-actions .button .icon{width:18px;height:18px}
  .toolbar-actions .button.print-button{width:44px;height:44px;padding:0}
  .recipe-overview{grid-template-columns:104px minmax(0,1fr);align-items:start;gap:14px;margin:18px 0 20px}
  .recipe-overview .recipe-hero-image{padding:4px;border-radius:12px;margin:0;width:100%;max-width:none}
  .recipe-overview .recipe-category{font-size:9px;line-height:1.5;letter-spacing:1px;margin-bottom:8px}
  .recipe-overview h1{font-size:26px;line-height:1.2;letter-spacing:-.7px}
  .recipe-overview .recipe-stats{font-size:12px;line-height:1.6;gap:7px;margin:12px 0 0;color:#7f6e59}
  .recipe-stats .icon{width:15px;height:15px;flex-shrink:0;margin-top:2px}
  .equipment-list{gap:5px;margin-top:12px}
  .equipment-list span{font-size:10px;line-height:1.5;padding:4px 7px}
  .recipe-tabs{position:sticky;top:calc(var(--app-header-height) + env(safe-area-inset-top));z-index:25;display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 -16px;padding:9px 16px;background:var(--paper);border-bottom:1px solid var(--line);scroll-margin-top:0;box-shadow:0 5px 10px #49311f04}
  .recipe-tabs button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:48px;padding:10px 8px;border:1px solid transparent;border-radius:10px;color:#8b7862;font-size:13px;font-weight:600;line-height:1.35}
  .recipe-tabs button.active{background:#fff;border-color:#e3d4be;box-shadow:0 2px 6px #49311f05;color:var(--brown)}
  .recipe-tabs .icon{width:18px;height:18px;flex-shrink:0}
  .recipe-panels{display:block;margin:22px 0 30px}
  .recipe-panels[data-active-panel="ingredients"]>.recipe-preparation{display:none}
  .recipe-panels[data-active-panel="preparation"]>.recipe-aside{display:none}
  .recipe-panels .recipe-aside{position:static;min-width:0}
  .recipe-panels .recipe-preparation{margin-top:0}
  .recipe-panels .ingredients-panel{padding:20px;margin:0;border-radius:14px}
  .panel-heading h2{font-size:26px}
  .panel-hint{font-size:12px;color:#8b7c6b;margin-bottom:10px}
  .ingredient{padding:8px 0}
  .ingredient label{align-items:center;gap:12px;min-height:44px;font-size:16px;line-height:1.6;color:#695a4c}
  .ingredient input{width:22px;height:22px;margin:0;border-radius:6px}
  .ingredient input:checked:after{font-size:15px}
  .ingredient.checked label>span{color:#9a8f80}
  .ingredient-continue{display:flex;min-height:50px;width:100%;margin-top:20px;font-size:14px;border-radius:11px}
  .tip-card{padding:19px 17px;gap:12px}
  .tip-card strong{font-size:12px}
  .tip-card p{font-size:14px;line-height:1.7;color:#826e55}
  .steps-heading{align-items:center;gap:10px;margin:0 0 18px}
  .steps-heading h2{font-size:26px}
  .step-count{font-size:11px;white-space:nowrap;padding:6px 9px}
  .steps-list{gap:15px}
  .step{padding:20px 16px;gap:12px;border-radius:14px}
  .step-number{width:29px;height:29px;font-size:16px}
  .step h3{font-size:17px;line-height:1.4;margin:2px 0 10px}
  .step p{font-size:16px;line-height:1.75;color:#766653}
  .step-check{display:flex;align-items:center;gap:9px;min-height:44px;width:100%;padding:9px 10px;margin-top:15px;border:1px solid #eae3d6;border-radius:8px;background:#fcfaf5;font-size:12px;font-weight:500;color:#8a7355}
  .step-check input{width:20px;height:20px;border-radius:5px}
  .step-check input:checked:after{font-size:13px}
  .step.is-done .step-check{background:#edf2e7;border-color:#dfe7d5;color:#64744d}
  .storage-note{font-size:14px;line-height:1.7;padding:18px}
  .recipe-finish{padding:22px 18px}
  .recipe-finish h3{font-size:23px}
  .recipe-finish p{font-size:14px;line-height:1.7}
  .recipe-finish .button{font-size:14px;min-height:50px;padding:12px;line-height:1.5}
  .recipe-disclaimer{font-size:12px;line-height:1.7;color:#92816c}
  .recipe-next{align-items:stretch;gap:16px}
  .recipe-next a{font-size:13px;line-height:1.5;min-height:56px;max-width:48%}
  .recipe-next small{font-size:9px;line-height:1.5;margin-bottom:5px}
  .recipe-next .icon{flex-shrink:0;width:17px;height:17px}
  .page-heading{margin:27px 0 24px}
  .page-heading h1{font-size:33px}
  .page-heading p{font-size:14px;line-height:1.7}
  .empty-state{padding:36px 20px;margin-bottom:30px}
  .empty-state p{font-size:14px;line-height:1.7}
  .empty-state .button{min-height:48px;font-size:14px}
  .guide-card p,.guide-note p{font-size:15px;line-height:1.75;color:#786753}
  .guide-note h2{font-size:24px}
  .guide-card h2{font-size:23px}
  .guide-note+.button{min-height:48px;font-size:14px}
  .site-footer{margin:8px 16px 0;padding:20px 0 24px;font-size:11px}
  .site-footer a{min-height:44px;display:flex;align-items:center}
  .toast{bottom:calc(var(--app-nav-height) + env(safe-area-inset-bottom) + 12px);font-size:13px;padding:13px 18px;max-width:calc(100% - 32px);width:max-content}
  a,button,input{scroll-margin-top:calc(var(--app-header-height) + 75px)}
  @media(hover:none){.basket-card:hover,.product-card:hover{transform:none}}
}

@media(max-width:359px){
  .brand strong{font-size:21px}
  .brand small{font-size:6.5px;letter-spacing:1.3px}
  .brand-mark{width:28px;height:28px}
  .header-inner{gap:9px}
  .welcome h1{font-size:30px}
  .basket-card{gap:11px;padding:11px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .basket-title{font-size:20px}
  .occasion-label{font-size:9px;padding:4px 6px}
  .card-bottom{font-size:10px}
  .product-link{grid-template-columns:92px minmax(0,1fr);gap:12px;padding:14px 12px}
  .product-body{padding-right:22px}
  .product-body h3{font-size:18px}
  .product-meta{font-size:11px}
  .favorite-button{right:4px;top:5px}
  .recipe-toolbar{gap:6px}
  .back-link{font-size:12px}
  .toolbar-actions .button{padding:9px}
  .recipe-overview{grid-template-columns:84px minmax(0,1fr);gap:12px}
  .recipe-overview h1{font-size:24px}
  .recipe-tabs button{font-size:12px;gap:5px}
  .recipe-tabs .icon{width:16px;height:16px}
  .ingredients-panel{padding:17px!important}
  .steps-heading h2{font-size:23px}
  .step-count{font-size:10px;padding:5px 8px}
  .step{padding:18px 13px;gap:10px}
  .step-number{width:26px;height:26px;font-size:15px}
}

@media print{
  .mobile-nav,.mobile-back,.recipe-tabs,.ingredient-continue,.basket-preview-toggle{display:none!important}
  body{padding-bottom:0}
  .recipe-overview{display:block;margin:0}
  .recipe-overview h1{font-size:26px}
  .recipe-panels>.recipe-aside,.recipe-panels>.recipe-preparation{display:block!important}
  .photo-window{display:none}
}