/* Time Objects — collection index and product pages (Figma "collection-blk", 2026-11).
   Built on home-v7.css (header, footer, aurora, units): PC sizes are Figma px × --u (1280 frame),
   SP (≤767) sizes are Figma px of the 375 frame. Page background #06050A throughout; the
   technical specifications sit on a #F7F7F7 block. */

.site.v7.cl{--line:rgba(255,255,255,.05);--dim:rgba(255,255,255,.8)}
/* the nav and menu button come in at once here (the top page waits for its intro) */
.site.v7.cl .top .r{animation-delay:.1s}
.site.v7.cl .burger{animation-delay:.1s}
.site.v7.cl > main{padding-bottom:calc(120 * var(--u))}

/* hairline under the header (Figma Line 1, y 96) */
.cl-rule{position:absolute;left:0;right:0;top:calc(96 * var(--u));height:1px;background:rgba(47,46,50,.5);pointer-events:none}

/* —— shared bits: model name, reference, tag, price —— */
.cl-nm{display:block;font:500 max(18px, calc(16 * var(--u)))/1 var(--sans);color:#fff}
.cl-ref{display:block;margin-top:calc(8 * var(--t));font:400 max(10px, calc(8 * var(--u)))/1 var(--sans);color:var(--dim)}
.cl-tag{
  display:inline-block;margin-top:calc(8 * var(--t));padding:calc(7 * var(--t)) calc(8 * var(--t));
  border:1px solid rgba(255,255,255,.2);border-radius:2px;
  font:400 max(10px, calc(8 * var(--u)))/1 var(--sans);text-transform:uppercase;color:#fff;
}
.cl-price{display:flex;align-items:baseline;gap:calc(6 * var(--t));margin-top:calc(12 * var(--t));font:500 max(14px, calc(12 * var(--u)))/1 var(--sans);color:#fff}
.cl-price small{font:400 max(10px, calc(8 * var(--u)))/1 var(--sans);color:var(--dim)}

/* product card (index and "Other models") */
.cl-card a{display:block;color:inherit;text-decoration:none}
.cl-card .ph{display:block;position:relative;overflow:hidden;aspect-ratio:4/5;background:#000}
.cl-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.cl-card .cl-nm{margin-top:calc(12 * var(--t))}
@media (hover:hover){.cl-card a:hover .ph img{transform:scale(1.03)}}

/* ===================================================================== index */
.cl-index{padding-top:calc(156 * var(--u))}
.cl-index .cl-head,.cl-index .cl-grid{width:var(--stage);margin-inline:auto}
.cl-title{margin:0;font:700 max(70px, calc(68 * var(--u)))/1 var(--sans);letter-spacing:-.02em;color:#fff}
.cl-kicker{margin:calc(30 * var(--u)) 0 0;font:700 max(14px, calc(12 * var(--u)))/1 var(--sans);color:#fff}
.cl-lead{margin:calc(16 * var(--u)) 0 0;max-width:calc(580 * var(--u));min-width:min(100%, 480px);font:400 max(14px, calc(12 * var(--u)))/1.3 var(--sans);color:#fff}
.cl-grid{
  display:grid;grid-template-columns:repeat(3, 1fr);column-gap:calc(70 * var(--u));row-gap:calc(60 * var(--u));
  margin-top:calc(51 * var(--u));padding:0;list-style:none;
}
.cl-grid .cl-card{min-width:0}

/* ===================================================================== product */
/* hero: photos down the left half, the details stay put on the right */
.pd-hero{display:grid;grid-template-columns:1fr 1fr;align-items:start}
.pd-gallery{position:relative;grid-column:1;grid-row:1}
.pd-track{display:flex;flex-direction:column;gap:3px}
.pd-shot{margin:0;position:relative;aspect-ratio:4/5;background:#000;overflow:hidden}
.pd-shot img{width:100%;height:100%;object-fit:cover}
.pd-shot button{all:unset;display:block;width:100%;height:100%;cursor:zoom-in}
.pd-shot button:focus-visible{outline:2px solid #fff;outline-offset:-4px}
/* "+" that follows the pointer over a photo (opens the full-screen view) */
.pd-plus{display:none}
@media (hover:hover) and (pointer:fine) and (min-width:768px){
  .pd-shot button{cursor:none}
  /* the box jumps with the pointer (no transition); the disc inside fades and grows/shrinks */
  .pd-plus{
    display:block;position:fixed;left:0;top:0;z-index:60;width:40px;height:40px;margin:-20px 0 0 -20px;pointer-events:none;
    transform:translate3d(var(--x, -100px), var(--y, -100px), 0);
  }
  /* simply shown over the photos and hidden elsewhere: no animation either way */
  .pd-plus{visibility:hidden}
  .pd-plus.on{visibility:visible}
  .pd-plus .disc{
    position:absolute;inset:1.5px;border:1px solid rgba(255,255,255,.2);border-radius:50%;
    background:rgba(6,5,10,.4);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  }
  .pd-plus svg{position:relative}
}
.pd-plus svg{display:block;width:100%;height:100%}
.pd-ctrl{display:none}
.pd-progress{display:none}

/* the details sit on the bottom of the screen, 30px up, and stay there while the photos scroll
   (a short window cuts their top: accepted) */
.pd-info{
  grid-column:2;grid-row:1;position:sticky;top:0;box-sizing:border-box;height:100vh;height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;padding:0 0 30px calc(250 * var(--u));
}
.pd-info-in{width:calc(330 * var(--u));min-width:300px}
.pd-name{margin:0;font:700 max(35px, calc(33 * var(--u)))/1 var(--sans);letter-spacing:-.02em;color:#fff}
.pd-info .cl-ref{margin-top:calc(6 * var(--t))}
.pd-info .cl-price{font-size:max(18px, calc(16 * var(--u)))}
.pd-info .cl-price small{font-size:max(12px, calc(10 * var(--u)))}
.pd-info .cl-tag{display:table;margin-top:calc(12 * var(--t))}
.pd-desc{margin:calc(18 * var(--t)) 0 0;max-width:calc(232 * var(--t));font:400 max(12px, calc(10 * var(--u)))/1.2 var(--sans);color:var(--dim)}
.pd-sum{margin:calc(18 * var(--t)) 0 0;padding:0}
.pd-sum div{display:grid;grid-template-columns:calc(105 * var(--t)) 1fr;border-top:1px solid var(--line);padding:calc(10 * var(--t)) 0}
.pd-sum div:last-child{border-bottom:1px solid var(--line)}
.pd-sum dt{font:400 max(14px, calc(12 * var(--u)))/1 var(--sans);color:rgba(255,255,255,.5)}
.pd-sum dd{margin:0;font:500 max(14px, calc(12 * var(--u)))/1 var(--sans);color:var(--dim)}
.pd-cta{display:flex;align-items:center;justify-content:space-between;margin-top:calc(18 * var(--t))}
.pd-contact{
  display:inline-flex;align-items:center;gap:calc(16 * var(--t));padding:calc(12 * var(--t)) calc(24 * var(--t));
  border:1px solid rgba(255,255,255,.3);border-radius:2px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  font:500 max(14px, calc(12 * var(--u)))/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:#fff;text-decoration:none;
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.pd-contact .ic{position:relative;flex:none;width:calc(14 * var(--t));height:calc(14 * var(--t));overflow:hidden;clip-path:inset(0);isolation:isolate}
/* inside the icon's own 14px box (giftee-group.com reference), always left to right: on hover
   the envelope leaves to the right and the plane comes in from the left; on leaving, the plane
   leaves to the right and the envelope comes back in from the left (collection.js: .is-on / .is-off) */
.pd-contact .ic svg{position:absolute;inset:0;width:100%;height:100%}
.pd-contact .plane{transform:translateX(-110%)}
.pd-contact.is-on .env,.pd-contact.is-off .plane{animation:ct-out .3s var(--ease) both}
.pd-contact.is-on .plane,.pd-contact.is-off .env{animation:ct-in .3s var(--ease) both}
@keyframes ct-out{from{transform:none}to{transform:translateX(110%)}}
@keyframes ct-in{from{transform:translateX(-110%)}to{transform:none}}
@media (hover:hover){.pd-contact:hover{border-color:#fff}}
/* FIND A PARTNER: full white; on hover the underline runs again from the left */
.site.v7 .pd-partner{
  padding-bottom:3px;font:400 max(12px, calc(10 * var(--u)))/1 var(--sans);text-transform:uppercase;color:#fff;text-decoration:none;
  background:linear-gradient(currentColor,currentColor) no-repeat 0 100% / 100% 1px;
}
@media (hover:hover){.site.v7 .pd-partner:hover{animation:cl-underline .8s var(--ease)}}
@keyframes cl-underline{
  0%{background-position:100% 100%;background-size:100% 1px}
  45%{background-position:100% 100%;background-size:0 1px}
  46%{background-position:0 100%;background-size:0 1px}
  100%{background-position:0 100%;background-size:100% 1px}
}
.pd-avail{margin:calc(18 * var(--t)) 0 0;font:400 max(12px, calc(10 * var(--u)))/1.2 var(--sans);color:var(--dim)}

/* Japanese (Figma "collection" JA layout): smaller name and summary, Medium headings */
.site.v7.ja .pd-name{font-weight:500;font-size:max(30px, calc(28 * var(--u)));letter-spacing:0}
.site.v7.ja .pd-desc{max-width:none;word-break:keep-all;overflow-wrap:anywhere}
.site.v7.ja .pd-sum div{grid-template-columns:calc(105 * var(--t)) 1fr}
.site.v7.ja .pd-sum dt{font-size:max(12px, calc(10 * var(--u)));color:#8C8C8C}
.site.v7.ja .pd-sum dd{font-size:max(12px, calc(10 * var(--u)))}
.site.v7.ja .pd-contact{font-size:max(12px, calc(10 * var(--u)))}
.site.v7.ja .pd-story h2{font-weight:500;line-height:1.2}
.site.v7.ja .pd-spec h2{font-weight:500;font-size:max(30px, calc(28 * var(--u)));line-height:1;letter-spacing:0}
.site.v7.ja .sg h3{font-weight:500}

/* story: two images + text, twice (Figma x 60 / 250 / 700 / 890) */
.pd-story{
  display:grid;grid-template-columns:calc(160 * var(--u)) calc(330 * var(--u)) 1fr calc(160 * var(--u)) calc(330 * var(--u));
  column-gap:calc(30 * var(--u));width:var(--stage);margin:calc(150 * var(--u)) auto 0;align-items:start;
}
.pd-story .pics{display:flex;flex-direction:column;gap:calc(6 * var(--u))}
.pd-story .pics:nth-of-type(1){grid-column:1}
.pd-story article:nth-of-type(1){grid-column:2}
.pd-story .pics:nth-of-type(2){grid-column:4}
.pd-story article:nth-of-type(2){grid-column:5}
.pd-story .pics img{width:100%;aspect-ratio:4/5;object-fit:cover;background:#d9d9d9}
.pd-story h2{margin:0;font:600 max(24px, calc(22 * var(--u)))/1 var(--sans);color:#fff}
.pd-story p{margin:calc(18 * var(--t)) 0 0;font:400 max(12px, calc(10 * var(--u)))/1.5 var(--sans);color:#fff}
.pd-story p + p{margin-top:1.5em}

/* technical specifications on light grey */
.pd-spec{margin-top:calc(120 * var(--u));background:#F7F7F7;color:#06050A}
.pd-spec-in{width:var(--stage);margin-inline:auto;padding:calc(90 * var(--u)) 0 calc(120 * var(--u))}
.pd-spec-head{display:flex;align-items:flex-end;justify-content:space-between;padding-bottom:calc(30 * var(--u));border-bottom:1px solid #06050A}
.pd-spec h2{margin:0;font:600 max(35px, calc(33 * var(--u)))/.9 var(--sans);letter-spacing:-.01em}
.pd-spec-head .ref{font:600 max(12px, calc(10 * var(--u)))/1 var(--sans);color:#06050A}
.sg{display:grid;grid-template-columns:50% 1fr;padding-top:calc(15 * var(--t))}
.sg + .sg{margin-top:calc(60 * var(--t));border-top:1px solid #06050A}
.sg h3{margin:0;font:600 max(14px, calc(12 * var(--u)))/1.2 var(--sans)}
.sg h3 button{all:unset;display:block;width:100%}
.sg h3 .ic{display:none}
.sg-body{grid-column:2}
.sg dl{margin:0}
.sg dl div{display:grid;grid-template-columns:calc(180 * var(--u)) 1fr;padding:0 0 calc(15 * var(--t));border-bottom:1px solid rgba(6,5,10,.05)}
.sg dl div + div{padding-top:calc(15 * var(--t))}
.sg dt{font:400 max(14px, calc(12 * var(--u)))/1.2 var(--sans);color:rgba(6,5,10,.5)}
.sg dd{margin:0;font:400 max(14px, calc(12 * var(--u)))/1.2 var(--sans)}
.pd-press{
  display:inline-flex;align-items:center;margin-top:calc(60 * var(--t));padding:calc(13 * var(--t)) calc(15 * var(--t));
  border:1px solid rgba(6,5,10,.3);border-radius:4px;
  font:600 max(10px, calc(8 * var(--u)))/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:#06050A;text-decoration:none;
  transition:border-color .3s var(--ease);
}
@media (hover:hover){.pd-press:hover{border-color:#06050A}}

/* lines run, then the text slides up (collection.js adds .spec-anim and, per row, .ln-in) */
.pd-spec-head,.sg,.sg dl > div{position:relative}
.sg dt,.sg dd{overflow:hidden}
.sg .su{display:block}
.spec-anim .pd-spec-head,.spec-anim .sg,.spec-anim .sg dl > div{border-color:transparent}
.spec-anim .pd-spec-head::after,.spec-anim .sg::before,.spec-anim .sg dl > div::after{
  content:"";position:absolute;left:0;height:1px;width:0;transition:width .7s var(--ease) var(--sd, 0s);
}
.spec-anim .pd-spec-head::after{bottom:-1px;background:#06050A}
.spec-anim .sg::before{top:-1px;background:#06050A}
.spec-anim .sg dl > div::after{bottom:-1px;background:rgba(6,5,10,.05)}
.spec-anim .pd-spec-head + .sg::before{display:none}
/* (as specific as the width:0 rule above, so the rows' lines do reach full width) */
.spec-anim .pd-spec-head.ln-in::after,.spec-anim .sg.ln-in::before,.spec-anim .sg dl > div.ln-in::after{width:100%}
.spec-anim .pd-spec-head h2,.spec-anim .pd-spec-head .ref,.spec-anim .sg h3{transform:translateY(30%);opacity:0;transition:transform .7s var(--ease) calc(var(--sd, 0s) + .3s),opacity .7s var(--ease) calc(var(--sd, 0s) + .3s)}
.spec-anim .pd-spec-head.ln-in h2,.spec-anim .pd-spec-head.ln-in .ref,.spec-anim .sg.ln-in h3{transform:none;opacity:1}
.spec-anim .sg .su{transform:translateY(105%);transition:transform .7s var(--ease) calc(var(--sd, 0s) + .3s)}
.spec-anim .sg dl > div.ln-in .su{transform:none}

/* other models */
.pd-others{width:var(--stage);margin:calc(60 * var(--u)) auto 0}
.pd-others h2{margin:0;font:600 max(35px, calc(33 * var(--u)))/.9 var(--sans);letter-spacing:-.01em;color:#fff}
.pd-others ul{display:grid;grid-template-columns:repeat(4, 1fr);column-gap:calc(80 * var(--u));margin:calc(60 * var(--u)) 0 0;padding:0;list-style:none}

/* full-screen photos (PC: + on a photo; SP: ZOOM) */
.pd-modal{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:#000;color:#fff;overflow:hidden;
}
.pd-modal[open]{display:block;animation:v7-fade .35s var(--ease) both}
.pd-modal::backdrop{background:#000}
.pd-modal .scroll{height:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.pd-modal .scroll img{display:block;width:100%;height:auto;background:#000}
.pd-modal .close{
  position:fixed;z-index:2;top:clamp(12px, 1.8vw, 24px);right:clamp(12px, 1.8vw, 24px);
  width:50px;height:50px;padding:0;border:1px solid rgba(255,255,255,.3);border-radius:50%;
  background:transparent;cursor:pointer;transition:transform .5s var(--ease),background-color .3s var(--ease);
}
.pd-modal .close::before,.pd-modal .close::after{
  content:"";position:absolute;left:50%;top:50%;width:18px;height:1px;background:#fff;transform:translate(-50%,-50%) rotate(45deg);
}
.pd-modal .close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.pd-modal .close:hover{transform:rotate(90deg);background:#06050A}
.pd-modal .close:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* —— entrance: model name rises line by line; cards and sections fade up —— */
@media (prefers-reduced-motion:no-preference){
  .cl-in{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
  .cl-in.is-in{opacity:1;transform:none}
}

/* ===================================================================== SP (≤767) */
@media (max-width:767px){
  .site.v7.cl > main{padding-bottom:90px}
  /* Figma Line 1 at y 131 includes the 46px status bar of the mock: 20px under the logo, 15px under the menu button */
  .cl-rule{top:85px;left:20px;right:20px}

  .cl-index{padding-top:161px}
  .cl-title{font-size:40px}
  .cl-kicker{margin-top:30px;font-size:14px}
  .cl-lead{margin-top:18px;max-width:none;min-width:0;font-size:12px}
  .cl-grid{grid-template-columns:1fr;row-gap:42px;margin-top:42px}

  /* product: swipeable photos with arrows, counter, ZOOM and a progress line */
  .pd-hero{display:block}
  .pd-gallery{margin:0}
  .pd-track{flex-direction:row;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
  .pd-track::-webkit-scrollbar{display:none}
  .pd-shot{flex:0 0 100%;scroll-snap-align:start}
  .pd-shot button{cursor:zoom-in}
  .pd-ctrl{display:block}
  .pd-arrow{
    position:absolute;top:50%;width:30px;height:30px;margin-top:-15px;padding:0;border:0;border-radius:50%;
    background:#fff;color:#06050A;cursor:pointer;display:grid;place-items:center;
  }
  .pd-arrow svg{width:12px;height:12px}
  .pd-arrow.prev{left:20px}
  .pd-arrow.next{right:20px}
  .pd-arrow{transition:opacity .3s var(--ease),visibility 0s}
  .pd-arrow[disabled]{opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s .3s}
  .pd-count{
    position:absolute;left:20px;bottom:20px;display:flex;gap:3px;padding:4px 8px;
    border:1px solid rgba(255,255,255,.4);border-radius:30px;font:400 12px/1 var(--sans);color:#fff;
  }
  .site.v7 .pd-zoom{
    position:absolute;right:20px;bottom:20px;padding:4px 0;border:0;background:none;cursor:pointer;
    font:400 10px/1 var(--sans);color:var(--dim);text-decoration:underline;text-underline-offset:.25em;
  }
  .pd-gallery[data-count="1"] .pd-arrow,.pd-gallery[data-count="1"] .pd-count{display:none}
  /* Figma: white track, the current photo's part in #06050A at 80% */
  .pd-progress{display:block;position:relative;height:1px;margin:15px 20px 0;background:#fff;overflow:hidden}
  .pd-progress i{position:absolute;inset:0 auto 0 0;width:var(--w, 100%);background:rgba(6,5,10,.8);transform:translateX(calc(var(--k, 0) * 100%));transition:transform .4s var(--ease)}

  .pd-info{position:static;height:auto;display:block;padding:42px 20px 0}
  .pd-info-in{width:auto;min-width:0}
  .pd-name{font-size:30px}
  .pd-sum div{grid-template-columns:120px 1fr;padding:10px 0}
  .pd-sum dt{font-size:12px;color:#8C8C8C}
  .pd-sum dd{font-size:12px}

  .pd-story{display:block;width:auto;margin:60px 20px 0}
  .pd-story .pics{flex-direction:row;gap:15px}
  .pd-story .pics:nth-of-type(2){margin-top:60px}
  .pd-story .pics img{flex:1 1 0;min-width:0}
  .pd-story article{margin-top:30px}

  .pd-spec{margin-top:60px}
  .pd-spec-in{width:auto;padding:60px 20px 90px}
  .pd-spec-head{display:block;padding-bottom:30px;border-bottom:0}
  .pd-spec h2{font-size:30px}
  .pd-spec-head .ref{display:block;margin-top:30px;font-size:10px}
  /* accordion: one group per category, all closed but Case */
  .sg{display:block;margin:0 -20px;padding:0 20px;border-top:1px solid #06050A}
  .sg + .sg{margin-top:0}
  .sg:last-of-type{border-bottom:1px solid #06050A}
  .sg h3 button{display:flex;align-items:center;justify-content:space-between;padding:18px 0;cursor:pointer}
  .sg h3 .ic{display:block;width:17px;height:17px}
  .sg h3 .ic .v{transition:transform .3s var(--ease);transform-origin:center}
  .sg h3 button[aria-expanded="true"] .ic .v{transform:scaleY(0)}
  .sg-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
  .sg-body > dl{overflow:hidden;min-height:0}
  .sg.open .sg-body{grid-template-rows:1fr}
  .sg dl div{grid-template-columns:120px 1fr;padding:12px 0}
  .sg dl div + div{padding-top:12px}
  .sg.open dl{padding-bottom:48px}
  .sg dt,.sg dd{font-size:12px}
  .pd-press{margin-top:42px}
  .spec-anim .pd-spec-head::after{display:none}
  .spec-anim .pd-spec-head + .sg::before{display:block}
  .spec-anim .sg:last-of-type{border-bottom-color:#06050A}

  .pd-others{width:auto;margin:60px 20px 0}
  .pd-others h2{font-size:30px}
  .pd-others ul{grid-template-columns:1fr 1fr;column-gap:15px;row-gap:42px;margin-top:30px}
  .pd-others .cl-nm{font-size:16px}
  .pd-others .cl-ref{margin-top:6px}
  .pd-others .cl-price{gap:3px;font-size:12px}

  .pd-modal .close{width:40px;height:40px}

  .site.v7.ja .pd-name{font-size:30px}
  .site.v7.ja .pd-sum div{grid-template-columns:120px 1fr}
  .site.v7.ja .pd-sum dt,.site.v7.ja .pd-sum dd{font-size:12px}
  .site.v7.ja .pd-story h2{line-height:1}
  .site.v7.ja .pd-spec h2{font-size:30px}
  .site.v7.ja .sg dt,.site.v7.ja .sg dd{font-size:14px}
}