.box-page { --box-inset: clamp(20px,4vw,48px); width: 94%; max-width: 1220px; margin: 18px auto 30px; padding: var(--box-inset); background: #fff; border: 6px solid var(--brand); border-radius: 36px; box-shadow: 0 8px 26px rgba(40,48,58,.05); overflow: hidden; }
.box-photo-header { position: relative; min-height: 285px; margin: calc(-1 * var(--box-inset)) calc(-1 * var(--box-inset)) 30px; overflow: hidden; background: #fff; }
.box-photo-copy { position: relative; z-index: 2; width: 58%; padding: 58px 24px 38px 58px; }
.box-page h1 { font: 400 clamp(2rem,5vw,3.5rem)/1.08 Pacifico,cursive; color: #ff4f86; margin: 0 0 24px; text-shadow: 3px 3px 0 #fff,-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,7px 7px 0 rgba(0,0,0,.065); }
.box-photo { position: absolute; z-index: 1; inset: 0 0 auto auto; width: 62%; height: 100%; object-fit: cover; object-position: right top; display: block; -webkit-mask-image: linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 18%,#000 42%),linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,.55) 78%,transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 18%,#000 42%),linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,.55) 78%,transparent 100%); mask-composite: intersect; }
.box-photo-header::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to right,#fff 0%,rgba(255,255,255,.98) 34%,rgba(255,255,255,.72) 48%,transparent 66%),linear-gradient(to bottom,transparent 0%,transparent 58%,rgba(255,255,255,.55) 78%,#fff 100%); }
.box-photo-copy p { font-weight: 500; font-size: 1.1rem; line-height: 1.55; max-width: 620px; margin: 0; }
.box-page p { color: #57606f; }
.box-items { display: grid; gap: 14px; margin: 24px 0; }
.box-item { border: 2px solid #ffe8cc; background: #fffaf3; border-radius: 18px; padding: 18px; display: grid; grid-template-columns: 1fr auto; gap: 8px 22px; }
.box-item h2 { margin: 0 0 4px; font-size: 1.12rem; color: #263238; }
.box-item p { margin: 0; font-size: .84rem; overflow-wrap: anywhere; }
.box-item .component-list { margin-top: 7px; font-size: .76rem; color: #667; }
.box-item strong { white-space: nowrap; }
.box-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; grid-column: 1 / -1; }
.box-actions button { border: 1px solid #ffcf9b; background: #fff; color: #383838; border-radius: 10px; padding: 6px 10px; cursor: pointer; font: inherit; font-weight: 700; }
.box-actions .remove { margin-left: 10px; color: #9b3040; }
.box-total { display: flex; justify-content: space-between; border-top: 3px solid var(--brand); padding-top: 18px; font-size: 1.35rem; font-weight: 800; }
.box-page .box-empty { text-align: center; padding: 50px 15px; border: 2px dashed #ffd4a0; border-radius: 18px; }
.box-link { display: inline-block; margin-top: 18px; padding: 12px 19px; background: var(--brand); color: #fff; border-radius: 12px; font-weight: 800; text-decoration: none; }
.empty-box-button { margin-top: 18px; margin-left: 12px; padding: 12px 19px; border: 2px solid #b85f13; border-radius: 12px; background: #fff; color: #9f4a09; font: 800 1rem Quicksand,sans-serif; cursor: pointer; }
.empty-box-button:hover { background: #fff2e5; }
.empty-box-button[hidden] { display: none; }
@media(max-width:1024px) { .box-page { border-width: 4px; border-radius: 26px; } }
@media(max-width:600px) and (orientation:portrait) { .box-photo-header { min-height: 285px; } .box-photo-copy { width: 76%; padding: 24px 18px; } .box-page h1 { font-size: 2.05rem; max-width: 80%; margin-bottom: 18px; } .box-photo-copy p { font-size: .86rem; line-height: 1.45; max-width: 68%; } .box-photo { -webkit-mask-image: linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 18%,#000 42%),linear-gradient(to bottom,#000 0%,#000 68%,rgba(0,0,0,.55) 86%,transparent 100%); mask-image: linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 18%,#000 42%),linear-gradient(to bottom,#000 0%,#000 68%,rgba(0,0,0,.55) 86%,transparent 100%); } .box-photo-header::after { background: linear-gradient(to right,#fff 0%,rgba(255,255,255,.98) 38%,rgba(255,255,255,.68) 52%,transparent 70%),linear-gradient(to bottom,transparent 0%,transparent 70%,rgba(255,255,255,.55) 88%,#fff 100%); } }
@media(max-width:600px) { .box-item { grid-template-columns: 1fr; } .box-actions { justify-content: flex-start; flex-wrap: wrap; } }
body { background: repeating-linear-gradient(45deg, #fffaf2 0, #fffaf2 30px, #fff1df 30px, #fff1df 60px); background-attachment: fixed; }