/* Foil Sample Board - Seed Tape Bench PDP (appily-onehundredsix ONLY).
 * Rectangular foil window | punch-hole tabs | tape notches | lot stamps.
 * NOT Jiffy Desk, Reliquary Desk, Packet Bay, Loom Stage, circular ring. */
.page-a106-foil-sample {
 overflow-x: clip;
 background:
 radial-gradient(ellipse 50% 30% at 18% 0%, rgba(232, 212, 168, 0.55), transparent 55%),
 radial-gradient(ellipse 40% 28% at 88% 8%, rgba(10, 126, 164, 0.1), transparent 50%),
 linear-gradient(175deg, var(--a106-field) 0%, var(--a106-field-warm) 48%, #E8F2EC 100%);
}

.page-a106-foil-sample .fs-main { padding-bottom: clamp(64px, 10vw, 96px); }

.page-a106-foil-sample .fs-kicker {
 margin: 0 0 6px;
 font-size: 0.72rem;
 font-weight: 800;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--a106-drip);
}

.page-a106-foil-sample .fs-trail {
 display: flex;
 flex-wrap: wrap;
 gap: 6px 8px;
 align-items: center;
 padding: 20px 0 8px;
 font-size: 0.88rem;
}
.page-a106-foil-sample .fs-trail a {
 font-weight: 700;
 color: var(--a106-drip-deep);
 text-decoration: none;
}
.page-a106-foil-sample .fs-trail a:hover { color: var(--a106-clay); text-decoration: underline; }
.page-a106-foil-sample .fs-sep { color: var(--a106-mute); }
.page-a106-foil-sample .fs-trail [aria-current="page"] { color: var(--a106-ink); font-weight: 700; }

.page-a106-foil-sample .fs-error {
 margin: 8px auto 0;
 padding: 12px 14px;
 border: 3px solid var(--a106-err);
 background: #FFF0F3;
 color: var(--a106-err);
 font-weight: 700;
}

.page-a106-foil-sample .fs-board {
 display: grid;
 grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
 gap: 32px;
 align-items: start;
 padding-top: 16px;
}

.page-a106-foil-sample .fs-foil-wrap {
 position: relative;
 z-index: 1;
}

/* Rectangular foil window (not circular) */
.page-a106-foil-sample .fs-foil {
 position: relative;
 aspect-ratio: 4 / 3;
 max-width: 560px;
 margin-inline: auto;
 padding: 14px;
 background:
 linear-gradient(145deg, #C8D8CE 0%, #A8C4B4 40%, #8FB0A0 100%);
 border: 4px solid var(--a106-soil);
 box-shadow: var(--a106-hard);
 opacity: 0;
 transform: translateY(12px);
 transition: opacity 480ms var(--a106-ease), transform 480ms var(--a106-ease);
}
.page-a106-foil-sample .fs-foil.is-live {
 opacity: 1;
 transform: none;
}
.page-a106-foil-sample .fs-foil-edge {
 position: absolute;
 inset: 6px;
 border: 2px dashed rgba(42, 33, 24, 0.35);
 pointer-events: none;
 z-index: 1;
}
.page-a106-foil-sample .fs-foil-seal {
 position: absolute;
 bottom: 10px;
 right: 10px;
 z-index: 2;
 width: 28px;
 height: 28px;
 display: grid;
 place-items: center;
 font-size: 0.5rem;
 font-weight: 800;
 letter-spacing: 0.04em;
 background: var(--a106-bloom);
 color: var(--a106-on-bloom);
 border: 2px solid var(--a106-soil);
 border-radius: 50%;
 transform: rotate(-12deg);
 opacity: 0.55;
 pointer-events: none;
}
.page-a106-foil-sample .fs-pane {
 position: relative;
 width: 100%;
 height: 100%;
 overflow: hidden;
 background: var(--a106-kraft);
 border: 3px solid var(--a106-soil);
}
.page-a106-foil-sample .fs-pane img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 opacity: 0;
 transition: opacity 280ms var(--a106-ease);
}
.page-a106-foil-sample .fs-pane img.is-active { opacity: 1; }

/* Punch-hole view tabs */
.page-a106-foil-sample .fs-punches {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-top: 14px;
 justify-content: center;
}
.page-a106-foil-sample .fs-face {
 position: relative;
 padding: 10px 16px 10px 28px;
 border: 2px solid var(--a106-soil);
 background: var(--a106-kraft);
 color: var(--a106-ink);
 font-family: var(--a106-font-body);
 font-weight: 700;
 font-size: 0.85rem;
 cursor: pointer;
 transition: background 160ms ease, color 160ms ease, transform 140ms var(--a106-ease);
}
.page-a106-foil-sample .fs-face::before {
 content: "";
 position: absolute;
 left: 10px;
 top: 50%;
 width: 10px;
 height: 10px;
 margin-top: -5px;
 border-radius: 50%;
 border: 2px solid var(--a106-soil);
 background: var(--a106-field);
}
.page-a106-foil-sample .fs-face.is-active {
 background: var(--a106-drip);
 color: var(--a106-on-drip);
}
.page-a106-foil-sample .fs-face.is-active::before {
 background: var(--a106-sprout);
}
.page-a106-foil-sample .fs-face:hover:not(.is-active) {
 background: var(--a106-field-warm);
}

.page-a106-foil-sample .fs-buy .fs-badge {
 display: inline-block;
 margin-bottom: 8px;
 padding: 4px 10px;
 background: var(--a106-bloom);
 color: var(--a106-on-bloom);
 font-size: 0.72rem;
 font-weight: 800;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 border: 2px solid var(--a106-soil);
}
.page-a106-foil-sample .fs-buy h1 {
 margin: 0 0 14px;
 font-family: var(--a106-font-display);
 font-size: clamp(1.8rem, 4vw, 2.5rem);
 font-weight: 600;
 color: var(--a106-ink);
 line-height: 1.1;
}

.page-a106-foil-sample .fs-meta {
 display: grid;
 gap: 8px;
 margin-bottom: 14px;
}
.page-a106-foil-sample .fs-rating {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 4px 8px;
 font-size: 0.88rem;
 color: var(--a106-mute);
}
.page-a106-foil-sample .fs-star { color: var(--a106-mute); opacity: 0.45; }
.page-a106-foil-sample .fs-star.is-filled { color: var(--a106-clay); opacity: 1; }
.page-a106-foil-sample .fs-price {
 display: flex;
 align-items: baseline;
 gap: 10px;
}
.page-a106-foil-sample .fs-price s {
 color: var(--a106-mute);
 font-size: 1rem;
}
.page-a106-foil-sample .fs-price strong {
 font-family: var(--a106-font-display);
 font-size: 1.8rem;
 color: var(--a106-drip-deep);
}
.page-a106-foil-sample .fs-stock {
 margin: 0;
 font-size: 0.9rem;
 font-weight: 700;
 color: var(--a106-ok);
}
.page-a106-foil-sample .fs-stock.is-out { color: var(--a106-err); }
.page-a106-foil-sample .fs-lede {
 margin: 0 0 18px;
 color: var(--a106-mute);
 max-width: 48ch;
 line-height: 1.55;
}

.page-a106-foil-sample .fs-form {
 display: grid;
 gap: 16px;
}
.page-a106-foil-sample .fs-field-label {
 display: block;
 margin-bottom: 8px;
 font-size: 0.78rem;
 font-weight: 800;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--a106-mute);
}
.page-a106-foil-sample .fs-field-label strong { color: var(--a106-ink); text-transform: none; letter-spacing: 0; }

/* Tape-length notches for pack size */
.page-a106-foil-sample .fs-notches {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
}
.page-a106-foil-sample .fs-notch {
 position: relative;
 min-width: 4.5rem;
 padding: 10px 14px;
 border: 2px solid var(--a106-soil);
 background: var(--a106-surface);
 color: var(--a106-ink);
 font-family: var(--a106-font-body);
 font-weight: 700;
 cursor: pointer;
 clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
 transition: background 160ms ease, color 160ms ease;
}
.page-a106-foil-sample .fs-notch.is-active {
 background: var(--a106-clay);
 color: var(--a106-on-clay);
}
.page-a106-foil-sample .fs-notch:hover:not(.is-active) { background: var(--a106-kraft); }

/* Lot stamps for origin */
.page-a106-foil-sample .fs-lots {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
}
.page-a106-foil-sample .fs-lot {
 padding: 8px 14px;
 border: 2px dashed var(--a106-soil);
 background: transparent;
 color: var(--a106-ink);
 font-family: var(--a106-font-body);
 font-weight: 700;
 font-size: 0.85rem;
 cursor: pointer;
 border-radius: 2px;
 transition: background 160ms ease, border-style 160ms ease, color 160ms ease;
}
.page-a106-foil-sample .fs-lot.is-active {
 background: var(--a106-sprout);
 color: var(--a106-sprout-ink);
 border-style: solid;
}
.page-a106-foil-sample .fs-lot:hover:not(.is-active) { background: var(--a106-field); }

/* Qty dial */
.page-a106-foil-sample .fs-dial {
 display: inline-flex;
 align-items: stretch;
 border: 3px solid var(--a106-soil);
 box-shadow: var(--a106-hard-sm);
 background: var(--a106-surface);
}
.page-a106-foil-sample .fs-dial button {
 width: 44px;
 border: 0;
 background: var(--a106-kraft);
 color: var(--a106-ink);
 font-size: 1.2rem;
 font-weight: 800;
 cursor: pointer;
}
.page-a106-foil-sample .fs-dial button:hover { background: var(--a106-sprout); color: var(--a106-sprout-ink); }
.page-a106-foil-sample .fs-dial input {
 width: 52px;
 border: 0;
 border-inline: 2px solid var(--a106-soil);
 text-align: center;
 font-weight: 800;
 font-size: 1.05rem;
 color: var(--a106-ink);
 background: var(--a106-surface);
 -moz-appearance: textfield;
}
.page-a106-foil-sample .fs-dial input::-webkit-outer-spin-button,
.page-a106-foil-sample .fs-dial input::-webkit-inner-spin-button { -webkit-appearance: none; }

.page-a106-foil-sample .fs-pay {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin: 0;
}
.page-a106-foil-sample .fs-pay span {
 padding: 4px 10px;
 font-size: 0.72rem;
 font-weight: 800;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 background: var(--a106-field);
 border: 2px solid var(--a106-border);
 color: var(--a106-mute);
}

.page-a106-foil-sample .fs-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
}
.page-a106-foil-sample .fs-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 48px;
 min-width: 8.5rem;
 padding: 12px 20px;
 border: 3px solid var(--a106-soil);
 box-shadow: var(--a106-hard-sm);
 font-family: var(--a106-font-body);
 font-weight: 800;
 text-decoration: none;
 cursor: pointer;
 transition: transform 140ms var(--a106-ease), box-shadow 140ms ease, background 160ms ease, color 160ms ease;
}
.page-a106-foil-sample .fs-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--a106-soil); }
.page-a106-foil-sample .fs-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--a106-soil); }
.page-a106-foil-sample .fs-btn--primary {
 background: var(--a106-bloom);
 color: var(--a106-on-bloom);
}
.page-a106-foil-sample .fs-btn--primary:hover {
 background: var(--a106-bloom-deep);
 color: var(--a106-on-bloom);
}
.page-a106-foil-sample .fs-btn--ghost {
 background: var(--a106-surface);
 color: var(--a106-ink);
}
.page-a106-foil-sample .fs-btn--ghost:hover { background: var(--a106-kraft); }
.page-a106-foil-sample .fs-btn.is-disabled {
 opacity: 0.45;
 cursor: not-allowed;
 pointer-events: none;
}

.page-a106-foil-sample .fs-trust {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 14px;
 margin-top: 40px;
}
.page-a106-foil-sample .fs-plate {
 padding: 16px;
 border: 3px solid var(--a106-soil);
 border-left-width: 6px;
 background: var(--a106-surface);
}
.page-a106-foil-sample .fs-plate--drip { border-left-color: var(--a106-drip); }
.page-a106-foil-sample .fs-plate--clay { border-left-color: var(--a106-clay); }
.page-a106-foil-sample .fs-plate--bloom { border-left-color: var(--a106-bloom); }
.page-a106-foil-sample .fs-plate strong {
 display: block;
 margin-bottom: 6px;
 font-family: var(--a106-font-display);
 font-size: 1.05rem;
 color: var(--a106-ink);
}
.page-a106-foil-sample .fs-plate p {
 margin: 0;
 font-size: 0.9rem;
 color: var(--a106-mute);
 line-height: 1.45;
}

.page-a106-foil-sample .fs-notes {
 margin-top: 32px;
 display: grid;
 gap: 12px;
}
.page-a106-foil-sample .fs-fold {
 border: 3px solid var(--a106-soil);
 background: var(--a106-kraft);
}
.page-a106-foil-sample .fs-fold summary {
 padding: 14px 16px;
 font-family: var(--a106-font-display);
 font-size: 1.15rem;
 font-weight: 600;
 color: var(--a106-ink);
 cursor: pointer;
 list-style: none;
}
.page-a106-foil-sample .fs-fold summary::-webkit-details-marker { display: none; }
.page-a106-foil-sample .fs-fold[open] summary {
 border-bottom: 2px solid var(--a106-kraft-deep);
}
.page-a106-foil-sample .fs-fold ul {
 margin: 0;
 padding: 14px 16px 16px 32px;
 color: var(--a106-mute);
}
.page-a106-foil-sample .fs-fold li { margin-bottom: 6px; }
.page-a106-foil-sample .fs-fold li strong { color: var(--a106-ink); }
.page-a106-foil-sample .fs-fold table {
 width: 100%;
 border-collapse: collapse;
 margin: 0;
}
.page-a106-foil-sample .fs-fold th,
.page-a106-foil-sample .fs-fold td {
 padding: 10px 16px;
 text-align: left;
 border-bottom: 1px solid var(--a106-kraft-deep);
 color: var(--a106-ink);
 word-break: break-word;
 overflow-wrap: anywhere;
 min-width: 0;
}
.page-a106-foil-sample .fs-fold th {
 width: 34%;
 font-size: 0.78rem;
 font-weight: 800;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--a106-mute);
}
.page-a106-foil-sample .fs-reviews {
 padding: 14px 16px 16px;
}
.page-a106-foil-sample .fs-reviews strong {
 display: block;
 margin-bottom: 6px;
 color: var(--a106-ink);
}
.page-a106-foil-sample .fs-reviews p { margin: 0; color: var(--a106-mute); }

.page-a106-foil-sample .fs-near { margin-top: 40px; }
.page-a106-foil-sample .fs-near h2 {
 margin: 0 0 16px;
 font-family: var(--a106-font-display);
 font-size: 1.5rem;
 color: var(--a106-ink);
}
.page-a106-foil-sample .fs-rail {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 12px;
}
.page-a106-foil-sample .fs-neighbor {
 display: grid;
 gap: 8px;
 padding: 10px;
 text-decoration: none;
 color: var(--a106-ink);
 background: var(--a106-surface);
 border: 3px solid var(--a106-soil);
 box-shadow: var(--a106-hard-sm);
 transition: transform 160ms var(--a106-ease);
 animation: fs-rail-in 420ms var(--a106-ease) both;
 animation-delay: calc(var(--fs-i, 0) * 60ms);
}
.page-a106-foil-sample .fs-neighbor:hover { transform: translate(-2px, -2px); }
.page-a106-foil-sample .fs-neighbor img {
 width: 100%;
 aspect-ratio: 1;
 object-fit: cover;
 border: 2px solid var(--a106-soil);
 background: var(--a106-kraft);
}
.page-a106-foil-sample .fs-neighbor strong {
 font-size: 0.9rem;
 line-height: 1.25;
}
.page-a106-foil-sample .fs-neighbor span {
 font-weight: 800;
 color: var(--a106-clay-deep);
}
@keyframes fs-rail-in {
 from { opacity: 0; transform: translateY(10px); }
 to { opacity: 1; transform: none; }
}

.page-a106-foil-sample .fs-miss {
 padding: clamp(48px, 10vw, 96px) 0;
 text-align: center;
}
.page-a106-foil-sample .fs-miss h1 {
 font-family: var(--a106-font-display);
 font-size: clamp(1.8rem, 4vw, 2.4rem);
 color: var(--a106-ink);
}
.page-a106-foil-sample .fs-miss > p { color: var(--a106-mute); max-width: 40ch; margin-inline: auto; }

@media (max-width: 900px) {
 .page-a106-foil-sample .fs-board { grid-template-columns: minmax(0, 1fr); }
 .page-a106-foil-sample .fs-foil-wrap { position: static; }
 .page-a106-foil-sample .fs-trust { grid-template-columns: minmax(0, 1fr); }
 .page-a106-foil-sample .fs-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
 .page-a106-foil-sample .fs-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .page-a106-foil-sample .fs-btn { width: 100%; min-width: 0; }
 .page-a106-foil-sample .fs-actions { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
 .page-a106-foil-sample .fs-foil { transition: none; opacity: 1; transform: none; }
 .page-a106-foil-sample .fs-neighbor { animation: none; }
 .page-a106-foil-sample .fs-btn { transition: none; }
 .page-a106-foil-sample .fs-pane img { transition: none; }
}

.page-a106-foil-sample .fs-btn:focus-visible,
.page-a106-foil-sample .fs-face:focus-visible,
.page-a106-foil-sample .fs-notch:focus-visible,
.page-a106-foil-sample .fs-lot:focus-visible,
.page-a106-foil-sample .fs-dial button:focus-visible,
.page-a106-foil-sample .fs-fold summary:focus-visible {
 outline: 3px solid var(--a106-sprout);
 outline-offset: 2px;
}