@import url('https://fonts.googleapis.com/css2?family=Italiana&display=swap');
:root{--sand:#f8f3f0;--ink:#0b0b0b;--navy:#1f274c;--muted:#706c66;--line:#d9d3cd;--canvas:#eee9e2;--gold:#9f8457}*{box-sizing:border-box}body{margin:0;background:var(--sand);color:var(--ink);font:14px/1.5 Avenir,'Avenir Next',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,.stage:focus-visible{outline:2px solid var(--navy);outline-offset:4px}a{color:inherit;text-decoration:none}button{border:0;background:transparent}h1,h2,p{margin:0}h1,h2{font-family:Italiana,'Times New Roman',serif;font-weight:400}h1{font-size:56px;line-height:1.08}button,.primary{transition:background .18s,color .18s,border-color .18s}.origin{height:32px;display:flex;align-items:center;justify-content:center;background:var(--navy);color:var(--sand);font-size:10px;letter-spacing:.12em}header{height:112px;display:grid;grid-template-columns:1fr 320px 1fr;align-items:center;padding:0 5.55%;border-bottom:1px solid var(--line)}.brand img{width:100%;display:block}.back{font-size:12px}.back span{font-size:20px;padding-right:16px}.bag{justify-self:end;display:flex;gap:10px;align-items:center;min-height:48px}.bag svg{width:24px;fill:none;stroke:currentColor;stroke-width:1.5}main{max-width:1600px;margin:auto}.breadcrumb{display:flex;gap:8px;padding:24px 5.55%;font-size:11px;color:var(--muted)}.atelier{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(358px,1fr);gap:64px;padding:0 5.55% 104px;align-items:start}.canvas-column{position:sticky;top:24px}.canvas-top{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 24px;background:var(--canvas)}.eyebrow{font-size:10px;letter-spacing:.12em}.text-action{padding:12px 0;font-size:12px;text-decoration:underline;text-underline-offset:5px}.stage{position:relative;width:100%;aspect-ratio:752/656;background:var(--canvas);overflow:hidden;touch-action:none;isolation:isolate}.stage #chain{width:100%;height:100%;position:absolute;inset:0;pointer-events:none}.stage #chain path{stroke:var(--gold);stroke-width:2;fill:none;stroke-linecap:round}.stage #chain path+path{opacity:.4}.empty-hint{position:absolute;top:39%;width:100%;text-align:center;pointer-events:none;transition:opacity .2s}.empty-hint img{width:32px;opacity:.6}.empty-hint p{font-family:Italiana,serif;font-size:28px;margin:16px 0 8px}.empty-hint span{font-size:12px;color:var(--muted)}.drop-hint{position:absolute;inset:auto 0 24px;text-align:center;font-size:10px;letter-spacing:.1em;opacity:0;pointer-events:none}.stage.drag-over{box-shadow:inset 0 0 0 2px var(--gold)}.stage.drag-over .drop-hint{opacity:1}.inspiration{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;z-index:10}.canvas-toolbar{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);height:56px;align-items:center}.canvas-toolbar button{font-size:12px;padding:12px 16px}.canvas-toolbar button:first-child{padding-left:0}.canvas-instruction{color:var(--muted);font-size:12px;text-align:center;margin-top:16px}.piece-tools{padding:16px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid var(--line)}.piece-tools[hidden]{display:none}.piece-tools small{display:block;font-size:10px;color:var(--muted)}.piece-actions{display:flex;gap:8px;flex-shrink:0}.piece-actions button{border:1px solid var(--line);height:40px;min-width:40px;padding:8px}.piece-actions button:hover{background:var(--ink);color:var(--sand)}.piece-actions .remove{border-color:transparent}.signature{display:flex;align-items:center;gap:16px;font-size:10px;letter-spacing:.1em;margin-bottom:24px}.signature img{width:24px}.product-line{display:flex;justify-content:space-between;gap:24px;margin-top:24px;color:var(--muted)}.product-line strong{font-size:16px;color:var(--ink);font-weight:500}.intro{color:var(--muted);margin:24px 0}.base-switch{display:flex;margin:32px 0;gap:8px}.base-switch button{border:1px solid var(--line);min-width:112px;height:48px}.base-switch button[aria-pressed=true]{background:var(--ink);color:var(--sand);border-color:var(--ink)}.choose-head{display:flex;justify-content:space-between;align-items:center;gap:16px}.choose-head h2{font:18px Avenir,'Avenir Next',sans-serif}.choose-head span{font-size:11px;color:var(--muted)}.filters{display:flex;gap:20px;border-bottom:1px solid var(--line);margin:16px 0 24px;overflow-x:auto}.filters button{font-size:12px;white-space:nowrap;height:40px;padding:0;border-bottom:1px solid transparent}.filters button[aria-pressed=true]{border-bottom-color:var(--ink)}.charm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 16px}.charm-card{padding:0;text-align:left;position:relative;touch-action:none}.charm-card .photo{display:block;background:#e6dfd6;aspect-ratio:1.15;overflow:hidden}.charm-card .photo svg{width:100%;height:100%;display:block}.charm-card .plus{position:absolute;top:4px;right:4px;width:24px;height:24px;background:var(--sand);font-size:20px;line-height:24px;text-align:center}.charm-card .name{display:block;margin-top:8px;font-size:12px}.charm-card:focus-visible,.charm-card:hover{outline:1px solid var(--gold);outline-offset:6px}.selection-line{display:flex;justify-content:space-between;margin:32px 0 16px;gap:16px;font-size:10px;letter-spacing:.08em}.selection-line span+span{letter-spacing:0;color:var(--muted)}.progress{display:flex;gap:8px}.progress i{flex:1;height:2px;background:var(--line)}.progress i.active{background:var(--ink)}.included{margin:20px 0 24px;font-size:12px;line-height:22px;color:var(--muted)}.primary{display:block;background:var(--ink);color:var(--sand);width:100%;min-height:56px;border:1px solid var(--ink);padding:16px 24px}.primary:hover{background:var(--navy);border-color:var(--navy)}.secondary{display:block;min-height:48px;width:100%;margin:8px 0;border:1px solid var(--line)}.feedback{font-size:12px;min-height:20px;margin:8px 0;color:var(--navy)}.detail-accordions{margin-top:24px}.detail-accordions details{border-top:1px solid var(--line)}.detail-accordions summary{cursor:pointer;list-style:none;padding:20px 0;font-size:12px}.detail-accordions summary:after{content:'+';float:right}.detail-accordions details[open] summary:after{content:'−'}.detail-accordions p{font-size:12px;color:var(--muted);padding:0 24px 24px 0}.placed-charm{position:absolute;width:10%;aspect-ratio:1;transform:translate(-50%,-50%);padding:0;border-radius:50%;border:2px solid var(--sand);touch-action:none;cursor:grab;box-shadow:0 3px 7px #1f274c12;z-index:2}.placed-charm svg{width:100%;height:100%;border-radius:50%;display:block;pointer-events:none}.placed-charm.selected{outline:1px solid var(--navy);outline-offset:5px;z-index:3}.placed-charm.selected:after{content:'';position:absolute;width:5px;height:5px;border:1px solid var(--navy);background:var(--sand);left:calc(50% - 3px);top:-11px;border-radius:50%}.placed-charm:active{cursor:grabbing}.drag-ghost{position:fixed;width:64px;height:64px;z-index:1000;pointer-events:none;transform:translate(-50%,-50%);opacity:.8;border-radius:50%;overflow:hidden;box-shadow:0 4px 16px #0002}.drag-ghost svg{width:100%;height:100%}.editorial{margin:0 5.55% 104px;display:grid;grid-template-columns:1fr 1fr;background:var(--navy);color:var(--sand)}.editorial>img{width:100%;height:560px;object-fit:cover;object-position:center 55%}.editorial>div{padding:80px 64px;align-self:center}.editorial h2{font-size:48px;line-height:1.15}.editorial p{max-width:360px;margin-top:24px;line-height:24px}.editorial .signature img{filter:brightness(0) invert(1)}footer{background:var(--ink);color:var(--sand);padding:64px 5.55%;display:grid;gap:24px}footer img{width:256px;filter:brightness(0) invert(1)}footer span{font-size:12px;color:#bab7b1}footer small{font-size:10px;letter-spacing:.12em}dialog{border:0;background:var(--sand);padding:32px;width:min(1040px,calc(100% - 32px));max-height:calc(100dvh - 32px);color:var(--ink)}dialog::backdrop{background:#0b0b0b80}.dialog-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:24px;margin-bottom:24px}.dialog-top h2{font-size:36px}.dialog-top button{font-size:28px;min-width:40px;min-height:40px}.dialog-body{display:grid;grid-template-columns:1.3fr 1fr;gap:40px}.review-canvas{background:var(--canvas);align-self:start}.review-canvas svg{width:100%;display:block}.review-detail ol{padding:16px 0 16px 20px;font-size:12px;line-height:24px}.review-prices{border-top:1px solid var(--line);padding-top:16px}.review-prices>div{display:flex;justify-content:space-between;gap:24px;font-size:12px;margin-bottom:16px}.review-prices .total{font-size:16px;border-top:1px solid var(--line);padding-top:24px;margin:24px 0}.review-detail>.text-action{width:100%}#bagFeedback{font-size:12px;text-align:center;color:var(--navy);min-height:24px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media(max-width:900px){header{height:88px;grid-template-columns:1fr 240px 1fr;padding:0 24px}.back{font-size:0}.back span{font-size:24px}.atelier{gap:32px;padding:0 24px 64px;grid-template-columns:minmax(0,1fr) minmax(320px,1fr)}h1{font-size:40px}.canvas-top{padding:0 16px}.empty-hint p{font-size:24px}.editorial{margin:0 24px 64px}.editorial>div{padding:40px 32px}.editorial h2{font-size:36px}.editorial>img{height:440px}.piece-tools{flex-wrap:wrap}}
@media(max-width:680px){header{height:64px;padding:0 16px;grid-template-columns:48px 1fr 48px}.brand{width:208px;justify-self:center}.back span{padding:0}.bag{gap:5px}.breadcrumb{padding:16px;font-size:10px}.atelier{display:flex;flex-direction:column;gap:40px;padding:0 0 64px}.canvas-column{position:relative;top:auto;width:100%}.canvas-top{height:48px}.stage{aspect-ratio:390/360}.canvas-toolbar,.piece-tools{margin:0 16px}.canvas-instruction{margin:16px 32px 0;font-size:11px}.controls{padding:0 16px;width:100%}.signature{margin-bottom:20px}h1{font-size:40px;line-height:1.05}.product-line{margin-top:20px}.intro{margin:20px 0}.base-switch{margin:24px 0}.charm-grid{gap:24px 16px}.placed-charm{width:12.5%;min-width:44px}.empty-hint{top:37%}.empty-hint p{font-size:26px}.editorial{display:block;margin:0 16px 64px}.editorial>img{height:384px}.editorial>div{padding:40px 24px 48px}.editorial h2{font-size:36px}footer{padding:48px 24px}.dialog-body{display:block}.review-canvas{margin-bottom:24px}.dialog-top{padding-bottom:16px;margin-bottom:16px}.dialog-top h2{font-size:30px}dialog{padding:20px;width:calc(100% - 16px);max-height:calc(100dvh - 16px)}.canvas-top .text-action{font-size:11px}.piece-actions{width:100%;justify-content:space-between}.piece-actions button{min-width:64px}.filters{gap:24px}.detail-accordions{margin-top:16px}}

.back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;vertical-align:middle;margin-right:16px}.stage{max-height:calc(100dvh - 192px)}
@media(max-width:680px){.back svg{margin:0}.canvas-column{position:sticky;top:0;z-index:10;background:var(--sand);box-shadow:0 8px 16px #f8f3f055}.stage{height:min(56vw,240px);max-height:none;aspect-ratio:auto}.canvas-top{min-height:40px;height:40px}.canvas-toolbar{height:44px}.canvas-instruction{margin:8px 16px 12px;font-size:10px}.empty-hint{top:28%}.empty-hint img{width:24px}.empty-hint p{font-size:24px;margin:8px 0 4px}.piece-tools{padding:8px 0}.piece-tools small{display:none}.piece-actions{width:auto;gap:4px}.piece-actions button{min-width:40px;height:36px}.piece-tools{flex-wrap:nowrap}.placed-charm{width:11%;min-width:40px}.controls{position:relative;z-index:1}}

/* 08/10: base choice, Entre Mareas cutouts, real bracelet mould and worn simulation */
.base-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:8px;margin:-16px 0 32px}.base-options button,.base-options .single{display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:baseline;border:1px solid var(--line);padding:12px 16px;min-height:64px;text-align:left}.base-options button[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.base-options button:hover{border-color:var(--ink)}.base-options strong{font-weight:500}.base-options small{grid-column:1/-1;font-size:10px;letter-spacing:.04em;color:var(--muted)}
.charm-card.cutout .photo{background:#efe9e2}.charm-card .photo img{width:100%;height:100%;object-fit:contain;padding:12%;display:block;pointer-events:none}
.placed-charm.cutout{border:0;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 3px 4px #1f274c2e)}.placed-charm.cutout img{width:100%;height:100%;display:block;pointer-events:none}.placed-charm.cutout.selected:after{top:-14px}
.drag-ghost.cutout{border-radius:0;box-shadow:none;overflow:visible;width:72px;height:72px}.drag-ghost img{width:100%;height:100%;object-fit:contain}
.mold-photo{position:absolute;object-fit:contain;pointer-events:none;z-index:1;filter:drop-shadow(0 2px 3px #1f274c1f)}.stage.has-mold #chainPath{display:none}
.canvas-actions{display:flex;gap:24px}.worn-view{position:absolute;inset:0;z-index:10;background:var(--canvas)}.worn-view svg{width:100%;height:100%;display:block}
.review-tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin-bottom:16px}.review-tabs button{font-size:12px;height:40px;padding:0;border-bottom:1px solid transparent}.review-tabs button[aria-pressed=true]{border-bottom-color:var(--ink)}.review-caption{font-size:11px;color:var(--muted);margin-top:12px}.review-length{font-size:11px;letter-spacing:.04em;color:var(--muted);margin-top:8px}
.included em{font-style:normal;font-size:10px;letter-spacing:.05em}
@media(max-width:680px){.base-options{margin:-8px 0 24px;grid-template-columns:1fr 1fr}.base-options button,.base-options .single{padding:12px;gap:4px 8px}.canvas-actions{gap:16px}.mold-photo{display:none}.stage.has-mold #chainPath{display:inline}.review-tabs{margin-bottom:12px}}

/* 09/10: paged Charm Bar catalogue and on-demand search */
.choose-tools{display:flex;align-items:center;gap:12px}.charm-search-toggle{display:grid;place-items:center;width:32px;height:32px;border:1px solid transparent}.charm-search-toggle:hover,.charm-search-toggle[aria-expanded=true]{border-color:var(--line)}.charm-search-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}.charm-search{display:flex;align-items:center;border-bottom:1px solid var(--ink);margin-top:12px}.charm-search input{min-width:0;width:100%;padding:10px 0;background:transparent;border:0;outline:0;font:13px Avenir,'Avenir Next',sans-serif}.charm-search input::placeholder{color:var(--muted)}.charm-search input:focus-visible{outline:2px solid var(--navy);outline-offset:4px}.charm-search button{width:32px;height:32px;font-size:22px;line-height:1;color:var(--muted)}.charm-results{min-height:18px;margin-top:16px;font-size:10px;letter-spacing:.08em;color:var(--muted)}.filters{margin-bottom:0}.charm-empty{grid-column:1/-1;padding:32px 0;color:var(--muted);font-size:12px}.charm-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:32px 0 8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);min-height:52px;font-size:11px}.charm-pagination button{padding:10px 0;font-size:11px;text-decoration:underline;text-underline-offset:4px}.charm-pagination span{color:var(--muted)}
@media(max-width:680px){.choose-tools{gap:8px}.charm-search-toggle{width:28px;height:28px}.charm-pagination{margin-top:24px}}