.how-to{padding:80px 0;background:var(--cream)}@media(max-width:720px){.how-to{padding:56px 0}}.how-to__head{margin-bottom:36px;max-width:720px}.how-to__eyebrow{color:var(--signal);margin-bottom:10px;display:inline-block}.how-to__title{font-size:clamp(26px,3vw,36px);line-height:1.1;letter-spacing:-.025em;font-weight:700;color:var(--ink)}.how-to__lede{margin-top:10px;color:var(--silt);font-size:15px}.how-to__rows{display:flex;flex-direction:column;gap:0}.how-to-row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:48px 0;border-top:1px dashed var(--line-strong)}.how-to-row:first-child{padding-top:0;border-top:0}.how-to-row--reverse .how-to-row__video{order:-1}@media(max-width:900px){.how-to-row{grid-template-columns:1fr;gap:24px;padding:32px 0}.how-to-row--reverse .how-to-row__video{order:0}}.how-to-row__title{font-family:var(--f-sans);font-size:clamp(22px,2.4vw,28px);font-weight:600;letter-spacing:-.025em;color:var(--ink);line-height:1.2;margin-bottom:16px}.how-to-row__body{font-size:16px;line-height:1.7;color:var(--ink)}.how-to-row__body p{margin-bottom:14px}.how-to-row__body p:last-child{margin-bottom:0}.how-to-row__body a{color:var(--royal);text-decoration:underline;text-underline-offset:3px}.how-to-row__body a:hover{color:var(--signal)}.how-to-row__frame{position:relative;aspect-ratio:16 / 9;border-radius:var(--radius-card);overflow:hidden;background:var(--ink)}.how-to-row__frame iframe,.how-to-row__frame .how-to-row__poster{width:100%;height:100%;border:0;display:block;object-fit:cover}.how-to-row__frame--link{display:block}.how-to-row__frame--debug{background:var(--bone);border:1px dashed var(--line-strong)}.how-to-row__debug{padding:18px;height:100%;overflow:auto;font-family:var(--f-mono);font-size:11px;color:var(--ink);line-height:1.5}.how-to-row__debug strong{display:block;margin-bottom:8px;color:var(--signal);font-size:12px}.how-to-row__debug p{margin:8px 0 6px;color:var(--silt)}.how-to-row__debug pre{margin:0;padding:10px;background:var(--cream);border-radius:4px;white-space:pre-wrap;word-break:break-all;font-size:10.5px;max-height:280px;overflow:auto}.how-to__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}@media(max-width:900px){.how-to__grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:540px){.how-to__grid{grid-template-columns:1fr}}.how-to__card{text-align:left;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;color:inherit}.how-to__card:hover{border-color:var(--line-strong);transform:translateY(-2px);box-shadow:0 16px 40px -16px #0c11181a}.how-to__thumb{position:relative;aspect-ratio:16 / 9;background:linear-gradient(135deg,var(--royal) 0%,var(--ocean) 100%);overflow:hidden}.how-to__img{width:100%;height:100%;object-fit:cover}.how-to__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#0c111800 40%,#0c111899)}.how-to__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:#e8542bf2;color:var(--cream);display:grid;place-items:center;transition:transform .2s ease}.how-to__card:hover .how-to__play{transform:translate(-50%,-50%) scale(1.05)}.how-to__duration{position:absolute;bottom:12px;right:12px;background:#0c1118d9;color:var(--cream);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;padding:4px 8px;border-radius:4px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.how-to__body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px}.how-to__cat{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);font-weight:600}.how-to__name{font-size:15px;font-weight:600;letter-spacing:-.015em;color:var(--ink);line-height:1.3}.how-to-dialog{width:min(900px,92vw);max-width:900px;padding:24px;border:1px solid var(--line-strong);border-radius:var(--radius-card);background:var(--cream);color:var(--ink)}.how-to-dialog::backdrop{background:#0c1118b3}.how-to-dialog__close{position:absolute;top:12px;right:14px;width:32px;height:32px;border-radius:50%;background:var(--bone);font-size:22px;line-height:1;color:var(--ink)}.how-to-dialog__title{font-size:16px;font-weight:600;margin-bottom:14px;padding-right:36px}.how-to-dialog__frame{aspect-ratio:16 / 9;background:var(--ink);border-radius:10px;overflow:hidden}.how-to-dialog__frame iframe,.how-to-dialog__frame video{width:100%;height:100%;border:0;display:block}
/*# sourceMappingURL=/cdn/shop/t/56/assets/sec-product-videos.css.map */