/* Product page (#/p/<handle>, #/art/<handle>) */
.pdp-top{padding-top:20px;padding-bottom:18px}
.pdp-grid{display:grid;grid-template-columns:7fr 5fr;gap:72px;align-items:start;padding-bottom:72px}
.pdp-media{position:sticky;top:84px}
.pdp-fig{position:relative;margin:0;aspect-ratio:1/1;max-height:calc(100vh - 128px);background:#E4C3A0;border:1px solid var(--brass);overflow:hidden;display:grid;place-items:center;filter:var(--soft-filter)}
.pdp-fig img{position:absolute;top:0;left:50%;height:100%;width:auto;max-width:none;transform:translateX(-50%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  transition:opacity .18s var(--ease),transform .18s var(--ease)}
.pdp-fig.is-swap img{opacity:0}

.pdp-fig.is-specimen{background:#E9E1D3}
.pdp-fig.is-specimen img,.pdp-fig.is-wide img{left:0;transform:none;width:100%;height:100%;object-fit:cover;-webkit-mask-image:none;mask-image:none}
.pdp-fig.is-wide{aspect-ratio:4/3}
.pdp-fig.is-art{background:var(--card)}
.pdp-fig.is-art img{top:8%;height:84%;width:auto;-webkit-mask-image:none;mask-image:none;border:16px solid #FBF7F0;box-shadow:0 1px 0 var(--brass-2),0 26px 40px -26px rgba(40,33,31,.55)}
.fig-tag{position:absolute;left:18px;top:18px;padding:7px 10px;background:rgba(251,247,240,.86);border:1px solid var(--brass);font:400 17px/1 "Libre Caslon Text",serif;color:#28211F}
.pdp-thumbs{display:flex;gap:10px;margin-top:12px}
.pdp-th{width:64px;height:64px;border:1px solid var(--brass-2);background:#E4C3A0;padding:0;overflow:hidden;transition:border-color .16s}
.pdp-th img{width:100%;height:100%;object-fit:cover;filter:var(--soft-filter)}
.pdp-th.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
@media (hover:hover){.pdp-th:not(.on):hover{border-color:var(--brass)}}
.pdp-th:focus-visible{outline:none;box-shadow:var(--ring)}

.pdp-info{padding-top:8px;display:flex;flex-direction:column;min-width:0}
.pdp-h{margin-top:6px}
.pdp-fl{margin-top:10px;font-size:15px;color:var(--ink-2)}
.pdp-spec{margin-top:4px;font-size:13.5px;color:var(--ink-3)}
.pdp-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin-top:22px;padding-top:20px;border-top:1px solid var(--brass)}
.pdp-price .t-price{font-size:32px}
.pdp-price .was{font-size:15px}
.trade-p .basis:last-child{flex-basis:100%;margin-top:6px}
.list-badge{font:650 10.5px/1 "Libre Franklin";letter-spacing:.1em;text-transform:uppercase;padding:5px 7px;border:1px solid var(--ink);border-radius:1px}
.pdp-case{flex-basis:100%;font-size:14px;color:var(--ink-2)}
.pdp-case b{font:400 18px/1 "Libre Caslon Text",serif;color:var(--ink)}
.pdp-tiers{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.pdp-tiers span{font-size:12px;padding:4px 7px;border:1px solid var(--brass-2);color:var(--ink-2)}
.pdp-bundle{margin-top:20px}
.pdp-opts{display:grid;gap:16px;margin-top:22px}
.pdp-opt{display:grid;gap:8px}
.pdp-opt-l{font:500 13px/1.2 "Libre Franklin";color:var(--ink)}
.pdp-opt-l em{font:italic 400 13.5px/1 "Libre Caslon Text",serif;color:var(--ink-3);margin-left:6px}
.pdp-opt .seg{justify-self:start}

/* "Put your name on the bottle" option card: two options, Apple-style */
.opt-card{border:0;margin-top:24px;min-width:0}
.opt-card legend{margin-bottom:8px;padding:0}
.opt-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt-b{display:grid;grid-template-columns:1fr auto;gap:2px 8px;height:100%;padding:13px 14px;border:1px solid var(--brass-2);border-radius:2px;background:var(--field);transition:border-color .16s,background-color .16s}
.opt-t{font:500 14px/1.25 "Libre Franklin"}
.opt-s{grid-column:1;font-size:12.5px;color:var(--ink-3)}
.opt-p{grid-column:2;grid-row:1;font:400 15px/1.2 "Libre Caslon Text",serif}
@media (hover:hover){.opt:hover .opt-b{border-color:var(--brass)}}
.opt input:checked+.opt-b{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--card)}
.opt input:focus-visible+.opt-b{box-shadow:var(--ring)}
.opt-more{display:grid;gap:14px;margin-top:14px}

.pdp-buy{display:flex;align-items:center;gap:10px;margin-top:24px}
.pdp-buy .step{height:52px}
.pdp-buy .btn{flex:1}
.qty-unit{font-size:13px;color:var(--ink-3);min-width:38px}
.pdp-del{margin-top:22px;border-top:1px solid var(--brass-2)}
.pdp-del li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--brass-2);font-size:13.5px;color:var(--ink-2)}
.pdp-del svg{flex:none;width:18px;height:18px;color:var(--ink)}
.pdp-info .wright-line{margin-top:18px}

.pdp-notes{background:var(--card);border-top:1px solid var(--brass);border-bottom:1px solid var(--brass);padding:72px 0}
.notes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px}
.notes-col .t-label{margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--brass)}
.notes{display:grid;gap:14px}
.notes dt{font:italic 400 15px/1.2 "Libre Caslon Text",serif;color:var(--ink-2)}
.notes dd{font:400 18px/1.45 "Libre Caslon Text",serif;margin-top:2px}
.serve-n{font:400 26px/1.15 "Libre Caslon Text",serif}
.serve-r{font:400 17px/1.5 "Libre Caslon Text",serif;color:var(--ink-2);margin:10px 0}
.story-p{font:400 17px/1.55 "Libre Caslon Text",serif;color:var(--ink-2)}

.pdp-rel{padding:56px 0 80px}
.rel-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:12px;border-bottom:1px solid var(--brass)}
.rel-cells{grid-template-columns:repeat(4,1fr)}
.rel-cells .cell:first-child{padding-left:0}

@media (max-width:1100px){
  .pdp-grid{gap:40px;grid-template-columns:1fr 1fr}
  .notes-grid{gap:32px}
  .rel-cells{grid-template-columns:repeat(2,1fr)}
  .rel-cells .cell:nth-child(3){border-left:0;padding-left:0}
  .rel-cells .cell:nth-child(n+3){border-top:1px solid var(--brass-2)}
}
@media (max-width:760px){
  .pdp-top{padding-top:14px;padding-bottom:12px}
  .pdp-grid{grid-template-columns:1fr;gap:24px;padding-bottom:48px}
  .pdp-media{position:static;margin:0 -16px}
  .pdp-fig{aspect-ratio:4/5;max-height:none;border-left:0;border-right:0}
  .pdp-fig.is-wide{aspect-ratio:4/3}
  .pdp-thumbs{padding:0 16px}
  .pdp-price .t-price{font-size:28px}
  .opt-pair{grid-template-columns:1fr 1fr}
  .opt-b{grid-template-columns:1fr;padding:12px}
  .opt-p{grid-column:1;grid-row:auto;margin-top:4px}
  .pdp-buy .step{height:48px}
  .pdp-buy .btn{height:48px;padding:0 14px}
  .pdp-notes{padding:48px 0}
  .notes-grid{grid-template-columns:1fr;gap:36px}
  .rel-cells{display:flex;margin:0 -16px;padding:0 16px}
  .rel-cells .cell:nth-child(3){border-left:1px solid var(--brass-2);padding-left:12px}
  .rel-cells .cell:nth-child(n+3){border-top:0}
}
